I'm having trouble putting background image on MS Outlook. I already searched on Google and found out that you can put background on Outlook via VML.
The first background fruit-bg.jpg is working, but when I put the nested background yellow-bg.png its not appearing. And also the whole email design is destroyed. Can someone help me with this?
I'm using testi to test email on Outlook: https://testi.at/proj/kEpTkBrFm51uk54c6Pwh3xRcY
Here's my email HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
body {
font-family: 'Georgia', 'Arial', sans-serif;
color: #000;
}
h1 {
font-family: 'Georgia', 'Arial', sans-serif;
font-size: 30px;
font-weight: bold;
color: #000;
}
p {
font-size: 13px;
}
h5 {
font-size: 11px;
font-weight: normal;
}
a.link, a.link:visited {
font-size: 13px;
color: #2b4a9c;
text-decoration: none;
border: 1px solid #2b4a9c;
padding: 5px;
}
a.link:hover {
font-size: 13px;
color: #ffac16;
text-decoration: none;
border: 1px solid #ffac16;
padding: 5px;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table style="text-align: center;" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 600px;">
<table width="600" style="width: 600px; text-align: center;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="600" background="https://i.ibb.co/cNR3dvy/fruit-bg.jpg" style="background: url('https://i.ibb.co/cNR3dvy/fruit-bg.jpg') no-repeat center center; background-size: cover; padding-bottom: 35px;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://i.ibb.co/cNR3dvy/fruit-bg.jpg" style="width: 600px; height: 610px; border: 0; display: inline-block; " fill="true" stroke="false" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; position: absolute; width: 600px; height:610px;">
<v:fill opacity="0%" color="#FFFFFF" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="600" style="width: 600px;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 50px 25px 0;">
<table width="550" style="width: 550px; padding: 0;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="550" background="https://i.ibb.co/RT5r3Ys/yellow-bg.png" style="background: url('https://i.ibb.co/RT5r3Ys/yellow-bg.png') no-repeat center center; background-size: cover; width: 550px; border-radius: 20px 60px 20px 60px; padding: 45px 40px 60px; box-shadow: -7px 8px 10px 3px #afafafb3; text-align: center;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://i.ibb.co/RT5r3Ys/yellow-bg.png" style="width: 550px; height: 500px; border: 0; display: inline-block; border-radius: 20px 60px 20px 60px; box-shadow: -7px 8px 10px 3px #afafafb3;" fill="true" stroke="false" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; position: absolute; width: 550px; height:500px;">
<v:fill opacity="0%" color="#FFFFFF" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table style="margin: auto; position; relative;" width="470" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: center;">
<img style="display: inline-block; width: 140px; margin-bottom: 15px;" src="https://i.ibb.co/YXG85jF/some-photo.jpg" />
</td>
<td style="text-align: center; padding-left: 30px;">
<img style="width: 100%; margin-bottom: 15px;" src="https://i.ibb.co/YXG85jF/some-photo.jpg" />
<p style="font-family: 'Georgia', 'Arial', sans-serif; font-size: 14px; line-height: 23px; padding: 0 30px; color: #000;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi.
</p>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:fill>
</v:rect>
</v:image>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:fill>
</v:rect>
</v:image>
<![endif]-->
</td>
</tr>
<tr style="background-color: #ffd000;">
<td style="padding: 35px 50px 55px;">
<p style="font-family: 'Georgia', 'Arial', sans-serif; font-size: 12px; color: #000;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p style="font-family: 'Georgia', 'Arial', sans-serif; font-size: 12px; color: #000;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
CodePudding user response：
Use this Method
sometime Emails doesn't support this style method style=background: url('');
This is work for me style=background-image: url();
No need to add like this background="https://i.ibb.co/cNR3dvy/fruit-bg.jpg"
Look at the example below
<td width="550" style="background-image: url(https://i.ibb.co/RT5r3Ys/yellow-bg.png); background-repeat:no-repeat; background-size: cover; width: 550px; border-radius: 20px 60px 20px 60px; padding: 45px 40px 60px; box-shadow: -7px 8px 10px 3px #afafafb3; text-align: center;">CodePudding user response：
Nested VML is problematic. It's essentially not workable.
I would throw out the rounded corners VML, and just go with the background. Outlook desktop will just have square corners.
The alternative is pretty advanced and finicky - search for the HTML Email Faux Absolute technique. It's absolute positioning for this kind of thing.