On the Styling tab, you can configure the required background type for a slide, component, or block in your content item. You can select the Solid
or Gradient
background type and set its opacity. Also, you can upload an image and apply it as a background.
To set the background type and its opacity:
2. Go to the Styling tab to activate the color picker.
In the FILL
section, you can select the background opacity value from the droplet list or enter it manually. To set the opacity of an entire slide / component / block, use the slider or input field in the OPACITY
section.
3. In the color picker popup that appears, select the required background type from the list.
4. Configure the selected background type.
Solid
Available for all item types
To fill the background of the selected slide, component, or block with one color, select the Solid
background type.
To configure the Solid
background:
Use the slider to change the color palette.
Use the slider to configure the background opacity. Also, you can enter the opacity value in the Alpha channel (A) field and press
Enter
to apply it.Click
No color
to make the background transparent.Select HEX or RGB and enter their codes for the specific color.
Apply theme colors added to the color picker to ensure style consistency in emails /l anding pages and their briefs.
Also, you can apply the Solid
type to customize the background color, highlight, and shadow of the Text component on the Properties tab.
Gradient
Available for e-Detailers, landing pages, and their briefs
To apply the background with transitions between two colors in a linear direction, select the Gradient
background type.
To set the gradient colors:
1. Click the initial color selector [1].
2. Select the required initial color on the palette.
3. Set the final color [2].
Use the slider to change the color palette.
To configure the gradient color opacity, click the respective color selector and set the slider to the required position. You can enter the opacity value in the Alpha channel (A) field and press Enter
to apply it.
To make the initial or final color transparent, click No color
.
Also, you can select HEX or RGB and enter their codes to set the specific color.
4. Set the gradient angle with the manual input or arrow keys.
Image
Available for e-Detailers, landing pages, and their briefs
When you select the Image
background type, you can upload the required image from your device, Library, or Veeva Vault PromoMats.
To customize the selected image background:
Stretch
fills the background height and width without keeping the original aspect ratio of the image. This option can distort the image.Fit
fills the background with the image original aspect ratio kept.Fill
enlarges the image to fill the background height and width. As a result, the image can be cropped from all sides.Tile
repeats the same image across the background. Use this option for the small images.
4. Align the image background vertically and horizontally with the ALIGNMENT
controls.
After customizing the background image, you can set ALTERNATE COLOR BACKGROUND
to replace the background image with an alternative color. We recommend using this option to cover possible issues with background image rendering since not all email clients support them. The ALTERNATE COLOR BACKGROUND
option is available for emails, email fragments and briefs.
Background image rendering limitations
Applicable to emails, email fragments, and email briefs
Outlook for Windows from MS Office suite has certain background rendering limitations that can affect email design and display. When customizing emails in eWizard Editor, consider the following rendering constraints:
Background image autoscaling. Outlook doesn't support the
auto
value for thebackground-size
CSS property.Fixed width. In Outlook, background images require fixed-width email layouts and precise component sizing. Without exact dimensions, the email layout may render incorrectly.
Nested elements. Outlook doesn't support nested elements with background images.
Right
alignment. In the components with background images, theRight
alignment doesn't apply in Outlook.