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.


.background {
display:table; /* Gmail iOS /
width:100%; max-width: 640px;
background-image:url(; 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;

<!--[if true]>
/* remove background image + padding from IE MSO */
.background { background-image:none; }
.spacing { padding-bottom:0; }


<!--[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="" color="#bbaadd" />
<v:textbox inset="0,0,0,0">
<table width="640">
<td background="" width="640" height="305" valign="middle">

<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 -->

<!--[if true]>

<!-- for testing: need at least one img to initiate download and render background image -->
<img src="">

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.