
A Background Image Theory to Scale
Implementing background images into an email layout can be tricky, especially when text is introduced as an overlay. Accomplishing this feat is fairly straightforward when using a fixed width and a fixed height. We can even get fancy and use a fluid width. Issues have a tendency to surface when attempting to use a fluid height.
In order to make a scalable background with a text overlay, we typically + unreliably rely on CSS padding, relinquish design constraints, or invoke multiple media queries. While these are tried and true, they come with pros and cons.
I wanted to share a technique I’ve been developing that allows for scalable background images, with a text overlay. It’s morphs a concept that can be referred to as The Little CSS Padding Hack.
CSS
<style>
.background {
display:table; /* Gmail iOS /
width:100%; max-width: 640px;
background-image:url(https://placeimg.com/640/300/tech); background-size: cover;
text-align: center; color: black;
font-family: sans-serif; font-size:0;
}
.spacing {
display:inline-block; width:0;
vertical-align: middle;
padding-bottom:47.65%; / (Image Height / Image Width) * 100% */
}
.content {
display:inline-block; width:100%; vertical-align: middle;
font-size:28px;
}
</style>
<!--[if true]>
<style>
/* remove background image + padding from IE MSO */
.background { background-image:none; }
.spacing { padding-bottom:0; }
</style>
<![endif]-->
HTML
<!--[if true]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:305px;">
<v:fill type="tile" src="https://placeimg.com/640/315/tech" color="#bbaadd" />
<v:textbox inset="0,0,0,0">
<div>
<table width="640">
<tr>
<td background="https://placeimg.com/640/310/tech" width="640" height="305" valign="middle">
<![endif]-->
<div class="background"> <!-- set the background and width -->
<div class="spacing"></div> <!-- no-width inline element to set the height with padding -->
<div class="content"> <!-- inline element for the content -->
EXAMPLE TEXT
</div>
</div>
<!--[if true]>
</td>
</tr>
</table>
</div>
/v:textbox
/v:rect
<![endif]-->
<!-- for testing: need at least one img to initiate download and render background image -->
<img src="https://example.com/example.gif">
While there may be a few adjustments needed to meet various email needs, initial rendering results have been promising.
Note: I’ve embedded the CSS in this example, for simplicity, while inlining produced the most consistent rendering results.
Love it, Steven. Great job adapting the technique for email to remedy a common headache.
I solved a very similar problem (albeit for a narrower use case) with a more primitive hack in my video preview technique, but if this has similar email client support, it’s certainly a much nicer approach. Looking forward to experimenting with it.