Multiple background images & emailing

Hail my little calves' livers! Night article, once is not customary (This expression means nothing, since it means the complete opposite). For the needs of a client that I will not name (Never, you hear me, NEVER! Even under the turtle!)I inserted several background images in a single cell in an email.

There is no silly idea, there are only frigid of the experimentation!

The results of email rendering leave me breathless! Because the support is really not that bad. And yes! So many things you don't know are still possible in email marketing! Of course, you still have to find a use for having more than one background image in a single cell...

Why bother inserting multiple background images in a single cell of an email?

In fact, the reasons are quite logical: first of all because it will allow you, for example, to place an image at the bottom, and another one at the top, and so on, regardless of the height of the cellThe background images in question will always remain "frozen" in their respective places, offering a graceful and aesthetic stretch...

" But it's beautiful my dear! You, you're an H, see? H, are not a lot of chest my dear..."

Cristina Cordula

But it also counts on the width (not only the height, follow my lead!). If the responsive email is based on a percentage width, and it really takes the whole width of the viewing medium, then we can also think of our background images as multiple elements, right or left shod, with or without margin, that will gracefully "evolve.

Isn't that clear? I'll give you that. And as I often say, a little iframe speaks better than a long monologue:

Well, National Geographic never asked us to do this email. "Don't mess around, eh?" as Coluche said. This is a personal initiative, to illustrate my point...

In this email, at the cover level (with the text "Go on an adventure!" at the top), the background image is actually composed of multiple background images. 14 in total. On the one hand there are the clouds (in animated gif)the hot air balloon (in animated gif)the mountains (in png)and so on, and so on...

Here, my email has a fixed width of 540 pixels wide. But if I decide to reduce the window, we switch to a responsive version of the email in 100% (below the 540 pixel wide breakpoint). So (and this is the advantage of this system)I don't need to provide a background image for the responsive cover, since the hill in the bottom left corner will always remain ironed in the bottom left corner (as well as the trees, the sheep, the car, the first part of the road, the sea, the buildings)The clouds will always remain in the upper left corner, the balloon and the sun will always remain in the upper right corner, and the mountains, the second hill, the tent, the picnic tablecloth, will always be in the lower right corner...

"Not crazy the brek..."

Eric, the Tower of Montparnasse Inferno

I confess, it takes a little bit of work. But the support is really decent! From iPads to iPhones, from Gmail to Google Apps, through Thunderbird, Office 365 or Outlook.com, the expected result is there! And for mail clients that don't support this method, you just have to fill in a "flattened" background image via the HTML attribute background.

Let's move on to the technical side to understand even better how it works...

If I first take care of my cell with my multiple background images, I'll fill in a CSS background property that will first include a single background image.

<td height="540" width="540" style="height:540px; width:540px; background:url(images/montgolfieres_01.gif) no-repeat top right; vertical-align:top;" class="width100pc" align="center">

Next, I'll call my other background images, separated by commas, still in the same background CSS property. The foreground elements must always precede the background elements in the background image declaration. And I will add via the HTML background attribute a flattened background image (as I explained above) to provide a backup solution for mail clients that do not support multiple background images.

<td background="images/background_01.jpg" height="540" width="540" style="height:540px; width:540px; background-image:url(images/montgolfieres_01.gif), url(images/soleils_01.gif), url(images/voitures_01.gif), url(images/moutons_01.png), url(images/arbres_01.png), url(images/routes_01.png), url(images/collines_01.png), url(images/maisons_01.png), url(images/mers_01.png), url(images/arbres_02.png), url(images/routes_02.png), url(images/collines_02.png), url(images/montagnes_01.png), url(images/nuages_01.gif); background-position:top right, top right, bottom left, bottom left, bottom left, bottom left, bottom left, bottom left, bottom left, bottom right, bottom right, bottom right, bottom right, top left; background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; background:url(images/montgolfieres_01.gif) no-repeat top right, url(images/soleils_01.gif) no-repeat top right, url(images/moutons_01.png) no-repeat bottom left, url(images/arbres_01.png) no-repeat bottom left, url(images/voitures_01.gif) no-repeat bottom left, url(images/routes_01.png) no-repeat bottom left, url(images/collines_01.png) no-repeat bottom left, url(images/maisons_01.png) no-repeat bottom left, url(images/mers_01.png) no-repeat bottom left, url(images/arbres_02.png) no-repeat bottom right, url(images/routes_02.png) no-repeat bottom right, url(images/collines_02.png) no-repeat bottom right, url(images/montagnes_01.png) no-repeat bottom right, url(images/nuages_01.gif) no-repeat top left; vertical-align:top;" class="width100pc" align="center">

I mean, if I want to get to the bottom of things (and it's always better to go there)I will insert this code in a cell with a background color and a VML code to propose a clean display on Outlook...

<tr>
          <td bgcolor="#C1EBEA" width="540" height="540" valign="top" style="width:540px; height:540px; vertical-align:top; background-color:#C1EBEA; background:#C1EBEA;"><!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:540px;height:540px;">
    <v:fill type="frame" src="images/background_01.jpg" color="#C1EBEA" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
            
            <div>
              <table style="width:100%; margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td background="images/background_01.jpg" height="540" width="540" style="height:540px; width:540px; background-image:url(images/montgolfieres_01.gif), url(images/soleils_01.gif), url(images/voitures_01.gif), url(images/moutons_01.png), url(images/arbres_01.png), url(images/routes_01.png), url(images/collines_01.png), url(images/maisons_01.png), url(images/mers_01.png), url(images/arbres_02.png), url(images/routes_02.png), url(images/collines_02.png), url(images/montagnes_01.png), url(images/nuages_01.gif); background-position:top right, top right, bottom left, bottom left, bottom left, bottom left, bottom left, bottom left, bottom left, bottom right, bottom right, bottom right, bottom right, top left; background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; background:url(images/montgolfieres_01.gif) no-repeat top right, url(images/soleils_01.gif) no-repeat top right, url(images/moutons_01.png) no-repeat bottom left, url(images/arbres_01.png) no-repeat bottom left, url(images/voitures_01.gif) no-repeat bottom left, url(images/routes_01.png) no-repeat bottom left, url(images/collines_01.png) no-repeat bottom left, url(images/maisons_01.png) no-repeat bottom left, url(images/mers_01.png) no-repeat bottom left, url(images/arbres_02.png) no-repeat bottom right, url(images/routes_02.png) no-repeat bottom right, url(images/collines_02.png) no-repeat bottom right, url(images/montagnes_01.png) no-repeat bottom right, url(images/nuages_01.gif) no-repeat top left; vertical-align:top;" class="width100pc" align="center"><table style="width:100%; margin:0px auto;" role="presentation" align="center" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td style="padding:135px 30px 30px;"><h1 style="margin:0px; padding:0px; font-weight:bold; color:#617286; font-size:60px; font-family:Tahoma, Geneva, sans-serif; mso-line-height-rule:exactly; line-height:58px; text-align:center;" class="fontsize50px lineheight48px">Go on an adventure!</h1></td>
                      </tr>
                    </table></td>
                </tr>
              </table>
            </div>
            
            <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]--></td>
        </tr>

Thus, regardless of the medium or mail client consulted, The rendering is really up to my expectations! If it seems like it's just a gimmick, consider Master Templates where you don't know anything about the height of the cell in question: this will ensure a great rendering, whatever the height of the content you've entered!

And much more!

By dissociating the elements of this background image, I can very well bring a particular personalization on each of these visuals On the example in question, I could very well imagine replacing only a few elements according to the dates or the seasons. Or changing the color of the car according to my recipient's favorite color, without completely changing the image! Ok the idea is rotten, but it's up to you to find the marketing goal after all 🙂

Another advantage that I think I can guess, and which is not negligible: if I design a single background image, with multiple animations in animated gif, the final file will be heavier. Dissociating the elements, and keeping only the relevant elements in animated gif allows to reduce the file size!

The only drawback I can see is that, if there are animated gifs, you have to be able to design them with a transparent background, and therefore add a dithering with a precise color, to avoid any dirty rendering... But well, that's not going to stop us, is it! If you liked it, share it. If you didn't like it, share. If you want to comment, share comments. It will always make me happy you know. Don't hesitate. Go ahead. Tell me what you thought. Come on, I'm waiting!