I am trying to get my email template HTML/CSS code to successfully render a background image in Outlook, but I can't seem to get it to work. Can someone help review this code, like the VML, to see how I can make the background image appear as a header image instead of a background wallpaper?
Here is how the background image renders in Outlook, like a wallpaper:
(https://i.stack.imgur.com/boRes.png)
Here is how it renders in other email clients (the image isn't exactly centered and there is another image floating on top):
(https://i.stack.imgur.com/ybIoW.png)
Here is the full code, in case it has something to do with the head:
<!DOCTYPE html>
<html lang="en" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml><![endif]-->
<style type="text/css">* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: inherit !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
}
p {
line-height: inherit
}
.desktop_hide,
.desktop_hide table {
mso-hide: all;
display: none;
max-height: 0px;
overflow: hidden;
}
.image_block img+div {
display: none;
}
@media (max-width:655px) {
.desktop_hide table.icons-inner {
display: inline-block !important;
}
.icons-inner {
text-align: center;
}
.icons-inner td {
margin: 0 auto;
}
.image_block img.big,
.row-content {
width: 100% !important;
}
.mobile_hide {
display: none;
}
.stack .column {
width: 100%;
display: block;
}
.mobile_hide {
min-height: 0;
max-height: 0;
max-width: 0;
overflow: hidden;
font-size: 0px;
}
.desktop_hide,
.desktop_hide table {
display: table !important;
max-height: none !important;
}
.row-3 .column-1 .block-1.image_block td.pad {
padding: 5px !important;
}
.row-3 .column-2 .block-1.paragraph_block td.pad>div {
text-align: center !important;
}
.row-3 .column-2 .block-1.paragraph_block td.pad {
padding: 10px 10px 10px 25px !important;
}
}
</style>
</head>
<body data-gramm="false" style="background-color: transparent; margin: 0; padding: 0; -webkit-text-size-adjust: none; text-size-adjust: none;">
<div class="preheader" style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Lorem Ipsum Lorem Ipsum</div>
<table border="0" cellpadding="0" cellspacing="0" class="nl-container" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: transparent; background-size: auto; background-image: none; background-position: top left; background-repeat: no-repeat;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #ffffff; background-size: auto;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-image: url('https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10076/IMAGE+greyscale.png?v=167528476800000'); background-repeat: no-repeat; background-size: cover; color: #000000; width: 635px;" width="635"><!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10076/IMAGE+greyscale.png?v=1675284768000" color="#fcfcfc" />
</v:background>
<![endif]-->
<tbody>
<tr>
<td class="column column-1" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-bottom: 5px; padding-top: 5px; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="100%">
<table border="0" cellpadding="15" cellspacing="0" class="image_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td class="pad">
<div align="center" class="alignment" style="line-height:10px"><img alt="Lorem Ipsum" class="big" src="https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10076/IMAGE+greyscale.png?v=1675284768000" style="display: block; height: auto; border: 0; width: 413px; max-width: 100%;" title="Lorem Ipsum" width="413" /></div>
</td>
</tr>
</tbody>
</table>
<div class="spacer_block block-2" style="height:65px;line-height:65px;font-size:1px;"> </div>
<div class="spacer_block block-3" style="height:65px;line-height:65px;font-size:1px;"> </div>
<div class="spacer_block block-4" style="height:65px;line-height:65px;font-size:1px;"> </div>
<table border="0" cellpadding="10" cellspacing="0" class="text_block block-5" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;" width="100%">
<tbody>
<tr>
<td class="pad">
<div style="font-family: Arial, sans-serif">
<div style="font-size: 12px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; mso-line-height-alt: 14.399999999999999px; color: #003952; line-height: 1.2;">
<p style="margin: 0; font-size: 38px; text-align: center; mso-line-height-alt: 45.6px;"><span style="font-size:46px;"><strong><span style="background-color:#abd037;">Hey, Firstname</span></strong></span></p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="10" cellspacing="0" class="text_block block-6" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;" width="100%">
<tbody>
<tr>
<td class="pad">
<div style="font-family: Arial, sans-serif">
<div style="font-size: 12px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; mso-line-height-alt: 14.399999999999999px; color: #003952; line-height: 1.2;">
<p style="margin: 0; font-size: 16px; text-align: center; mso-line-height-alt: 19.2px;"><span style="background-color:#abd037;"><strong><span style="font-size:28px;background-color:#abd037;"> – It’s LOREM IPSUM.</span></strong></span></p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="spacer_block block-7" style="height:65px;line-height:65px;font-size:1px;"> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-2" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #fcfcfc; color: #000000; width: 635px;" width="635">
<tbody>
<tr>
<td class="column column-1" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-top: 25px; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="paragraph_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;" width="100%">
<tbody>
<tr>
<td class="pad" style="padding-bottom:10px;padding-left:15px;padding-right:15px;padding-top:15px;">
<div style="color:#003952;direction:ltr;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;font-size:16px;font-weight:400;letter-spacing:0px;line-height:120%;text-align:left;mso-line-height-alt:19.2px;">
<p style="margin: 0; margin-bottom: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum mi quis nisi bibendum, facilisis pharetra lectus pharetra. Aliquam elit sapien, iaculis id finibus sed, semper quis arcu. Vestibulum felis ante, consequat vitae mattis at, accumsan vel urna. Nullam sodales eros et lobortis hendrerit. Nullam scelerisque nunc dolor, eget ultrices nisl laoreet non. Curabitur aliquam arcu at dui ullamcorper pellentesque. Aliquam tempor purus sit amet arcu tincidunt mollis. Vivamus eu orci eu augue gravida gravida. Duis vel lorem in elit scelerisque ultricies in ac nisl. Fusce malesuada neque non lorem semper suscipit. Quisque ut dui non ligula cursus dapibus quis vitae est. Etiam ornare malesuada eros, et venenatis est. Quisque lacinia tortor at diam gravida ornare at vel mi.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="button_block block-2" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td class="pad" style="padding-bottom:30px;padding-left:10px;padding-right:10px;padding-top:30px;text-align:center;">
<div align="center" class="alignment"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:42px;width:149px;v-text-anchor:middle;" arcsize="10%" stroke="false" fillcolor="#abd037"><w:anchorlock/><v:textbox inset="0px,0px,0px,0px"><center style="color:#003952; font-family:Arial, sans-serif; font-size:16px"><![endif]-->
<div style="text-decoration:none;display:inline-block;color:#003952;background-color:#abd037;border-radius:4px;width:auto;border-top:0px solid transparent;font-weight:400;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;padding-top:5px;padding-bottom:5px;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:16px;text-align:center;mso-border-alt:none;word-break:keep-all;"><span style="padding-left:20px;padding-right:20px;font-size:16px;display:inline-block;letter-spacing:normal;"><span dir="ltr" style="word-break: break-word; line-height: 32px;"><strong>CTA</strong></span></span></div>
<!--[if mso]></center></v:textbox></v:roundrect><![endif]--></div>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="paragraph_block block-3" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;" width="100%">
<tbody>
<tr>
<td class="pad" style="padding-bottom:25px;padding-left:15px;padding-right:15px;padding-top:15px;">
<div style="color:#003952;direction:ltr;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;font-size:16px;font-weight:400;letter-spacing:0px;line-height:120%;text-align:left;mso-line-height-alt:19.2px;">
<p style="margin: 0; margin-bottom: 16px;">Thank you for your support,</p>
<p style="margin: 0;"> LOREM IPSUM</p>
</div>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="10" cellspacing="0" class="divider_block block-4" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td class="pad">
<div align="center" class="alignment">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td class="divider_inner" style="font-size: 1px; line-height: 1px; border-top: 2px dotted #003952;"><span> </span></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-3" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #fcfcfc; color: #000000; border-radius: 10px; width: 635px;" width="635">
<tbody>
<tr>
<td class="column column-1" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 25px; vertical-align: middle; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="41.666666666666664%">
<table border="0" cellpadding="25" cellspacing="0" class="image_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td class="pad">
<div align="center" class="alignment" style="line-height:10px"><img src="https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10076/IMAGE+greyscale.png?v=1675284768000" style="display: block; height: auto; border: 0; width: 195px; max-width: 100%;" width="195" /></div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="column column-2" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-bottom: 5px; padding-top: 5px; vertical-align: middle; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="58.333333333333336%">
<table border="0" cellpadding="0" cellspacing="0" class="paragraph_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;" width="100%">
<tbody>
<tr>
<td class="pad" style="padding-bottom:25px;padding-right:35px;padding-top:10px;">
<div style="color:#003851;direction:ltr;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;font-size:13px;font-weight:400;letter-spacing:0px;line-height:120%;text-align:center;mso-line-height-alt:15.6px;">
<p style="margin: 0; margin-bottom: 7px;"><span style="color: #003952;">1550 Alphabet Drive, Suite 1004</span></p>
<p style="margin: 0; margin-bottom: 7px;"><span style="color: #003952;">Arlington, VA 22202</span></p>
<p style="margin: 0; margin-bottom: 7px;"><span style="color: #003952;"> © 2023 Lorem Ipsum. All rights reserved.</span></p>
<p style="margin: 0; margin-bottom: 7px;"> </p>
<p style="margin: 0;"><span style="color: #003952;">Unsubscribe | View in Browser | Privacy</span></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End --></body>
</html>
I'm tried writing the VML code various ways like this, for example, to stop it from repeating:
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="frame" src="[IMAGE HERE] color="#ffffff" position="center top" />
</v:background>
<![endif]-->