CODEWITHSUNDEEP
htmlcssvbaoutlook
user5295320
user5295320

Reputation: 11

Newsletter is ruined in Outlook

I can not get the background images to work in Outlook HTML newsletter. I tried bulletproof method, but it is not working as it supposed to be!

Please check out my code to see if you have any ideas how to display 3 different background images correctly in Outlook. This is what I have at the moment (and it works flawlessly everywhere but Outlook)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> 
    <head>
        <title>E-mail newsletter</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">            
        <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" name="viewport">
        <style type="text/css">

/* Reset */
body { margin: 0px; padding: 0px; background-color: #FFFFFF; }

::selection {
background: #ff2f2f; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #ff2f2f; /* Gecko Browsers */
}

/* Responsive */
@media only screen and (max-width:600px) {

/* Tables
parameters: width, alignment, padding */

table[class=scale] { width: 100%!important; }
table[class=scale-300] { width: 100%!important; height: 300px!important; }
table[class=scale-90] { width: 90%!important; }

/* Td */
td[class=hide] { display: none!important; height: 0px!important; }
td[class=scale-left] { width: 100%!important; text-align: left!important;}
td[class=scale-height] { height: 70px!important;}
td[class=scale-left-bottom] { width: 100%!important; text-align: left!important; padding-bottom: 24px!important; }
td[class=scale-left-top] { width: 100%!important; text-align: left!important; padding-top: 24px!important; }
td[class=scale-left-all] { width: 100%!important; text-align: left!important; padding-top: 24px!important; padding-bottom: 24px!important; }
td[class=scale-center] { width: 100%!important; text-align: center!important;}
td[class=scale-center-both] { width: 100%!important; text-align: center!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=scale-center-bottom] { width: 100%!important; text-align: center!important; padding-bottom: 24px!important; }
td[class=scale-center-top] { width: 100%!important; text-align: center!important; padding-top: 24px!important; }
td[class=scale-center-all] { width: 100%!important; text-align: center!important; padding-top: 24px!important; padding-bottom: 24px!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=scale-right] { width: 100%!important; text-align: right!important;}
td[class=scale-right-bottom] { width: 100%!important; text-align: right!important; padding-bottom: 24px!important; }
td[class=scale-right-top] { width: 100%!important; text-align: right!important; padding-top: 24px!important; }
td[class=scale-right-all] { width: 100%!important; text-align: right!important; padding-top: 24px!important; padding-bottom: 24px!important; }

td[class=scale-center-bottom-both] { width: 100%!important; text-align: center!important; padding-bottom: 24px!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=scale-center-top-both] { width: 100%!important; text-align: center!important; padding-top: 24px!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=reset] { height: 0px!important; }
td[class=scale-center-topextra] { width: 100%!important; text-align: center!important; padding-top: 84px!important; }

img[class="reset"] { display: inline!important; }
img[class="scale-80"] { width: 80%!important; }

}


    </style>
</head>
<body>

<table class="scale" data-bgcolor="Body BG" data-module="Header" style="background-color: rgb(255, 255, 255); position: relative; opacity: 1; top: 0px; left: 0px;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">

    <tr>
                            <td align="center" style="color:#444444; font-family:Helvetica, Verdana, Arial, sans-serif; font-size:13px;  padding:50px 0px 20px 0;">
                                Can't see the offer? Click <a href="http://webpage.com" style="color: rgb(219, 0, 19);">here</a>!                               </td>
                        </tr>       
    <tr>
        <td>
            <table class="scale" style="background-size: cover; background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-image: url(&quot;http://s30.postimg.org/s36pgisoh/bg1.jpg&quot;);" data-bg="Quote BG" align="center" height="340" background="http://s30.postimg.org/s36pgisoh/bg1.jpg" border="0" cellpadding="0" cellspacing="0" width="620">
                <tr>
                    <td style="background-position: 50% 100%; background-repeat: no-repeat no-repeat;" height="50" background="http://s10.postimg.org/u2e99laih/cut_top.png">
                        &nbsp;                      </td>
                </tr>
                <tr>
                    <td align="center">
                        <table class="scale" align="center" border="0" cellpadding="0" cellspacing="0" width="500">
                            <tr>
                                <td height="50">
                                    &nbsp;                                  </td>
                            </tr>

                            <tr>
                                <td data-color="Header Headline" data-max="64" data-min="16" data-size="Header Headline" style="font-family: &quot;Proxima N W01 At Smbd&quot;,Helvetica,Arial,sans-serif; font-size: 29px; color: rgb(255, 255, 255); line-height: 42.05px;" align="center">BEST OFFER HERE!<br><br><span data-color="Header Subline" data-max="50" data-min="16" data-size="Header Subline" style="font-size: 38px; line-height: 38px; color: rgb(255, 255, 255);">STARTS FROM <strong>35 EUR</strong>!</span>
                                </td>
                            </tr>
                            <tr>
                                <td height="40">
                                    &nbsp; </td>
                            </tr>
                            <tr>
                                <td style="color: rgb(255, 255, 255); font-size: 15px; line-height: 25.5px;" data-color="Header Button" data-max="28" data-min="14" data-size="Header Button" align="center"><a data-color="Header Button" data-max="28" data-min="14" data-size="Header Button" data-bgcolor="Header Button" href="http://webpage.com" style="background-color: rgb(219, 0, 19); border-radius: 40px; padding: 10px 30px; color: rgb(255, 255, 255); font-family: &quot;Proxima N W01 At Smbd&quot;,Helvetica,Arial,sans-serif; text-decoration: none; font-size: 15px; line-height: 25.5px;">ORDER NOW&nbsp;<img src="http://s11.postimg.org/nk238dn6n/nool.png" height="10px" width="11px" alt=""></a>
                                </td>
                            </tr>
                            <tr>
                                <td height="50">
                                    &nbsp;                                  </td>
                            </tr>
                        </table>

                    </td>
                </tr>
                <tr>
                    <td style="background-position: 50% 100%; background-repeat: no-repeat no-repeat;" height="50" background="http://s27.postimg.org/f9g57wpgz/cut_down.png">
                        &nbsp;                      </td>
                        </td>
                            </tr>
                        </table></tr>
            </table></body></html>


                                                                                                                                </body></html>

Upvotes: 1

Views: 257

Answers (1)

Argo
Argo

Reputation: 335

background-image is not supported in outlook, sorry for you.

Take a look here about css compatibility in email clients: https://www.campaignmonitor.com/css/

Using html and css in email it's very very difficult. Every single email client reading your email is going to have it's own rules about how it deals with HTML emails, so you are going to have to design for the lowest common denominator.

Upvotes: 1

Related Questions