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.