cancel
Showing results for 
Search instead for 
Did you mean: 

Adding Background Images

Highlighted
Honored Contributor

Adding Background Images

 UPDATED: March 2018

 

Please click here to learn how to add background images in the third-generation editor.

 

The information below is out of date.

-------

Before we go into the how of adding background images, please take note that not all email clients support background images for emails. 

 

Now we can get to the How To!  Depending on the template you are using, there are a couple of different ways to add background images.  Let’s go over the three most common: 

 

If your template already has a background image, all we need to do is replace the URL in the code to reference the image you wish to display.  You will go to the Style Sheet, and search for background-image (using Ctrl+F makes this faster and easier).  You will then see background-image:url; All you need to do is replace the link within the parenthesis.  Make sure that you have the full URL of the image from the beginning http to the .jpg or other file type at the end.  Just hit save and return to the Design tab.  In the below example this template has 2 sections with images.  The outerbg is the outer background around the sides of the image.  The mainbg is the background behind your content. 

 

If the template does not have a background image, you can add in the below code to the .BODY tag of the Style Sheet.  Make sure to hit Enter after the last semi-colon so you start on a new line.  If the text is not indented like the rest of the style sheet, that is ok. Once you Save it will indent. 

Background-image: url(urlhere);

Background-repeat: no-repeat;

 

If you want to add a background to just a block you can do that too.  Within the first line you should see <table style=”… right after the quotes that follow style=, you will add the following:

Background-image: url(urlhere); Background-repeat: no-repeat;

 

A couple of things to note, you always want to have a background color (most often noted as background-color) specified within the code.  This will show if the email client used by your contacts does not display the background image.  This is important, especially if you have a dark image and lighter text.  If no color is chosen, the default of white appears, and that can make the text hard to read. You can adjust how the image repeats.  If you would like the image to repeat going down the email in a vertical fashion change no-repeat to repeat-y.  If you would like the image to repeat across the page in a horizontal fashion change no-repeat to repeat-x. Also, if you want you can use an image from your Constant Contact library.  

 

If you need any assistance with adding in background images, feel free to reach out to us.  Have you added a background image before?  Share how you have used them here.