htmloutlookhtml-emailvml

VML Formatting for email template not working

Trying to format an email that has the confetti background image taking up an entire <td> but it doesn't seem to want to corporate with me. Any help is appreciated

Desired Look (how it renders in gmail and locally) enter image description here Look I am getting (how it renders in Outlook) enter image description here

Code (just for the confetti section:

<tr>
                <td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0; ">
                    <table width="100%" style="border-spacing:0;" role="presentation"  >
                        <tr width="100%">
                            <td class="padding content" width="100%" 
                                style="padding-top:90px;padding-bottom:20px;padding-right:20px;padding-left:20px;width:100%;text-align:center; font-size:20px;background-image: url(https://i.ibb.co/9cTRh0Y/confetti.png) ">
                                <!--[if gte mso 9]>
                                <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 480pt; height: 300pt;" src="https://i.ibb.co/9cTRh0Y/confetti.png" />                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 480pt; height:300pt;">
                                <v:fill  opacity="0%" color="#fff"  />
                                <v:textbox inset="0,0,0,0">
                                <![endif]-->
                                <div>
                                <p style="font-size:23px; font-weight:bold; padding-bottom: 5px; line-height: 28px;">
                                    Announcing the Self-Service Password Reset <br><strong style="color: #007da5;">Raffle Winner</strong></p>
                                <p style="font-size:18px;line-height: 23px;">Thank you to everyone who registered for the SSPR feature. <br> Out of everyone in ICT we had 48 people register! <br>Without further ado, the winner of the <strong>$20 gift card to Starbucks</strong>  is...</p>                                  
                                <p style="text-align:center;font-size:23px; font-weight:bold; padding-bottom: 5px; line-height: 28px;">Winner! </p>
                                <p style="font-size:12px;line-height: 23px;">The winner will be contacted separately to receive their prize</p>              
                            </div>                    
                                    <!--[if gte mso 9]>
                                    
                                    </v:textbox>
                                    </v:rect>
                                    <![endif]-->
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
Solution

  • Your problem is you're setting padding on the wrapping which is then padding the Outlook background image. I would suggest wrapping your content in another table and setting the padding on the inner of the new table, as you'll see below:

    <tr>
<td style="width:100%;text-align:center; font-size:20px;background-image: url(https://i.ibb.co/9cTRh0Y/confetti.png)">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 480pt; height: 300pt;" src="https://i.ibb.co/9cTRh0Y/confetti.png" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 480pt; height:300pt;">
<v:fill  opacity="0%" color="#fff"  />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
        <tr>
            <td style="padding:90px 20px 20px 20px; text-align:center; font-size:20px; font-family:arial, helvetica, sans-serif; border:1px solid blue;">
                <p style="font-size:23px; font-weight:bold; padding-bottom: 5px; line-height: 28px;">
                Announcing the Self-Service Password Reset <br><strong style="color: #007da5;">Raffle Winner</strong></p>
                <p style="font-size:18px;line-height: 23px;">Thank you to everyone who registered for the SSPR feature. <br> Out of everyone in ICT we had 48 people register! <br>Without further ado, the winner of the <strong>$20 gift card to Starbucks</strong>  is...</p>                                  
                <p style="text-align:center;font-size:23px; font-weight:bold; padding-bottom: 5px; line-height: 28px;">Winner! </p>
                <p style="font-size:12px;line-height: 23px;">The winner will be contacted separately to receive their prize</p> 
            </td>
        </tr>
    </table>          
</div>                    
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>