How to Add a Background to an Email

When creating or editing an email template, you can apply different backgrounds to different email components:

  • Entire email;
  • Stripe;
  • Structure;
  • Container.

How to Add a Background to an Entire Email

Color

Go to Appearance > General settings > Email background color and select the necessary color or insert your color code.

Background color for an email

Image

To add a background image, enable Background image and upload the image or select it from Bank.

Background image for an email

Make sure you pick the right size of the image. For the template with the default width of 600px, the width of the background image should be 1920px. The length will depend on the length of your email copy.

Background image applied to an email

You can change or edit the image straight in the editor by clicking the corresponding icons.

Change a background image

Enable Center image if you use multi-patterned images or images with a focus on particular objects.

Center image

If the length of the image isn’t enough to cover the background of the whole copy, enable Repeat image. The image will be repeated as many times as needed to cover the whole template.

Note. This option is more suitable for homogeneous images with seamless transition. Otherwise, the border between repeated images will be noticeable.

Noticeable border

How to Add a Background to a Stripe

Color

Click the necessary stripe, go to Stripe background color and select the color or insert your color code. For a contrast effect, you can apply different colors to different stripes.

color background for a stripe

Image

To add a background image, enable Background image and upload the image or select it from Bank. Enable Repeat image and Align to center if needed. You can change or edit the image by clicking the corresponding icons.

Background image for a stripe

Note. Stripes are mostly optimized for desktops. Mobiles may not display them or distort the display, depending on the device. To preview your email, click View message on the top panel.

Email preview

How to Add a Background to a Structure

Color

Click the necessary structure, go to Background color of structure and select the color or insert your color code.

Color background for a structure

Image

To add a background image, enable Background image and upload the image or select it from Bank. Enable Repeat image and Align to center if needed. You can change or edit the image by clicking the corresponding icons.

Background image for a structure

Note. Be careful with white logos and other elements put against the colorful image background. If the image isn’t rendered by an email client for any reason, white elements won’t be visible. Consider adding an alternative background that will have the color of the structure.

How to Add a Background to a Container

It’s most applicable to add background to containers for

  • Banners;
  • Product cards;
  • Promo codes.

It's convenient for you as you don’t have to edit the image itself or create it in Photoshop. It’s convenient for the user as they can copy the promo code as text and don’t have to enter it manually.

Color

Click the necessary container, go to Background color of container and select the color or insert your color code. Set Rounding if needed, to round your container.

Color background for a container

Image

To add a background image, enable Background image and upload the image or select it from Bank. Enable Repeat image and Align to center if needed. You can change or edit the image by clicking the corresponding icons.

Background image for a container

Any Questions?
We’re always happy to help!
Request a Callback
Fill in the form, and our specialists will call you back as soon as possible.
Request a Callback
Chat Support
We’re waiting for your questions!
Send a Chat Message
Email
Contact the eSputnik support team
Send an Email