Skip to main content
All CollectionsEditor
Background styling
Background styling

Style your item background with different colors, gradients, and images

Yuliia Skrybantovych avatar
Written by Yuliia Skrybantovych
Updated over 2 weeks ago

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:

1. Open the slide, select the block or component on the content item layout.

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:

  1. Click the image miniature on the Styling tab.

  2. Hover over the image to edit it or upload a new one.

  3. Select the required IMAGE FIT option:

  • 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 the background-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, the Right alignment doesn't apply in Outlook.

Did this answer your question?