javascript - Background image of email template is not working in outlook any version -
i have created email template foreground , background images. got background images not accepted outlook except in body tag. want implement background header , footer
has 1 have alternate solution that. spent time didn't luck.
some 1 has given alternate background images td tag link
unfortunately doesn't work me may did wrong, because don't have more knowledge html , css
i have taken responsive template , modified requirement
here template code
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" /> <meta name="format-detection" content="telephone=no" /> <!-- disable auto telephone linking in ios --> <title>respmail response html email designed work on major email platforms , smartphones</title> <style type="text/css"> /* reset styles */ body, #bodytable, #bodycell, #bodycell{height:100% !important; margin:0; padding:0; width:100% !important;font-family:helvetica, arial, "lucida grande", sans-serif;} table{border-collapse:collapse;} table[id=bodytable] {width:100%!important;margin:auto;max-width:500px!important;color:#7a7a7a;font-weight:normal;} img, img{border:0; outline:none; text-decoration:none;height:auto; line-height:100%;} {text-decoration:none !important;border-bottom: 1px solid;} h1, h2, h3, h4, h5, h6{color:#5f5f5f; font-weight:normal; font-family:helvetica; font-size:20px; line-height:125%; text-align:left; letter-spacing:normal;margin-top:0;margin-right:0;margin-bottom:10px;margin-left:0;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;} /* client-specific styles */ .readmsgbody{width:100%;} .externalclass{width:100%;} /* force hotmail/outlook.com display emails @ full width. */ .externalclass, .externalclass p, .externalclass span, .externalclass font, .externalclass td, .externalclass div{line-height:100%;} /* force hotmail/outlook.com display line heights normally. */ table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* remove spacing between tables in outlook 2007 , up. */ #outlook a{padding:0;} /* force outlook 2007 , provide "view in browser" message. */ img{-ms-interpolation-mode: bicubic;display:block;outline:none; text-decoration:none;} /* force ie smoothly render resized images. */ body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; font-weight:normal!important;} /* prevent windows- , webkit-based mobile platforms changing declared text sizes. */ .externalclass td[class="ecxflexiblecontainerbox"] h3 {padding-top: 10px !important;} /* force hotmail push 2-grid sub headers down */ /* /\/\/\/\/\/\/\/\/ template styles /\/\/\/\/\/\/\/\/ */ /* ========== page styles ========== */ h1{display:block;font-size:26px;font-style:normal;font-weight:normal;line-height:100%;} h2{display:block;font-size:20px;font-style:normal;font-weight:normal;line-height:120%;} h3{display:block;font-size:17px;font-style:normal;font-weight:normal;line-height:110%;} h4{display:block;font-size:18px;font-style:italic;font-weight:normal;line-height:100%;} .flexibleimage{height:auto;} .linkremoveborder{border-bottom:0 !important;} table[class=flexiblecontainercelldivider] {padding-bottom:0 !important;padding-top:0 !important;} body, #bodytable{background-color:#e1e1e1;} #emailheader{background-color:#e1e1e1;} #emailbody{background-color:#ffffff;} #emailfooter{background-color:#e1e1e1;} .textcontent, .textcontentlast{color:#8b8b8b; font-family:helvetica; font-size:16px; line-height:125%; text-align:left;} .textcontent a, .textcontentlast a{color:#205478; text-decoration:underline;} .nestedcontainer{background-color:#f8f8f8; border:1px solid #cccccc;} .emailbutton{background-color:#205478; border-collapse:separate;} .buttoncontent{color:#ffffff; font-family:helvetica; font-size:18px; font-weight:bold; line-height:100%; padding:15px; text-align:center;} .buttoncontent a{color:#ffffff; display:block; text-decoration:none!important; border:0!important;} .emailcalendar{background-color:#ffffff; border:1px solid #cccccc;} .emailcalendarmonth{background-color:#205478; color:#ffffff; font-family:helvetica, arial, sans-serif; font-size:16px; font-weight:bold; padding-top:10px; padding-bottom:10px; text-align:center;} .emailcalendarday{color:#205478; font-family:helvetica, arial, sans-serif; font-size:60px; font-weight:bold; line-height:100%; padding-top:20px; padding-bottom:20px; text-align:center;} .imagecontenttext {margin-top: 10px;line-height:0;} .imagecontenttext {line-height:0;} #invisibleintroduction {display:none !important;} /* removing introduction text view */ /*framework hacks & overrides */ span[class=ios-color-hack] {color:#275100!important;text-decoration:none!important;} /* remove link colors in ios (below duplicates based on color preference) */ span[class=ios-color-hack2] {color:#205478!important;text-decoration:none!important;} span[class=ios-color-hack3] {color:#8b8b8b!important;text-decoration:none!important;} /* nice , clean way target phone numbers want clickable , avoid mobile phone linking other numbers like, not phone numbers. use these 2 blocks of code "unstyle" numbers may linked. second block gives class apply span tag numbers linked , styled. inspired campaign monitor's article on using phone numbers in email: http://www.campaignmonitor.com/blog/post/3571/using-phone-numbers-in-html-email/. */ .a[href^="tel"], a[href^="sms"] {text-decoration:none!important;color:#606060!important;pointer-events:none!important;cursor:default!important;} .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {text-decoration:none!important;color:#606060!important;pointer-events:auto!important;cursor:default!important;} /* mobile styles */ @media screen , (max-width: 480px){ /*////// client-specific styles //////*/ body{width:100% !important; min-width:100% !important;} /* force ios mail render email @ full width. */ /* framework styles */ /* css selectors written in attribute selector format prevent yahoo mail rendering media query styles on desktop. */ table[id="emailheader"], table[id="emailbody"], table[id="emailfooter"], table[class="flexiblecontainer"] {width:100% !important;} td[class="flexiblecontainerbox"], td[class="flexiblecontainerbox"] table {display: block;width: 100%;text-align: left;} /* following style rule makes image classed 'flexibleimage' fluid when query activates. make sure add inline max-width images prevent them blowing out. */ td[class="imagecontent"] img {height:auto !important; width:100% !important; max-width:100% !important;} img[class="flexibleimage"]{height:auto !important; width:100% !important;max-width:100% !important;} img[class="flexibleimagesmall"]{height:auto !important; width:auto !important;} /* create top space every second element in block */ table[class="flexiblecontainerboxnext"]{padding-top: 10px !important;} /* make buttons in email span full width of container, allowing left- or right-handed ease of use. */ table[class="emailbutton"]{width:100% !important;} td[class="buttoncontent"]{padding:0 !important;} td[class="buttoncontent"] a{padding:15px !important;} } /* conditions android devices * http://developer.android.com/guide/webapps/targeting.html * http://pugetworks.com/2011/04/css-media-queries-for-targeting-different-mobile-devices/ ; =====================================================*/ @media screen , (-webkit-device-pixel-ratio:.75){ /* put css low density (ldpi) android layouts in here */ } @media screen , (-webkit-device-pixel-ratio:1){ /* put css medium density (mdpi) android layouts in here */ } @media screen , (-webkit-device-pixel-ratio:1.5){ /* put css high density (hdpi) android layouts in here */ } /* end android targeting */ /* conditions ios devices =====================================================*/ @media screen , (min-device-width : 320px) , (max-device-width:568px) { } /* end ios targeting */ </style> <!-- outlook conditional css these 2 style blocks target outlook 2007 & 2010 specifically, forcing columns single vertical stack on mobile clients. done avoid 'page break bug' , optional. more information here: http://templates.mailchimp.com/development/css/outlook-conditional-css --> <!--[if mso 12]> <style type="text/css"> .flexiblecontainer{display:block !important; width:100% !important;} </style> <![endif]--> <!--[if mso 14]> <style type="text/css"> .flexiblecontainer{display:block !important; width:100% !important;} </style> <![endif]--> </head> <body bgcolor="#eef0f2" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0"> <center style="background-color:#eef0f2;"> <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodytable" style="table-layout: fixed;max-width:100% !important;width: 100% !important;min-width: 100% !important;"> <tr> <td align="center" valign="top" id="bodycell"> <table bgcolor="#eef0f2;" border="0" cellpadding="0" cellspacing="0" width="500" id="emailheader"> <!-- header row // --> <tr> <td align="center" valign="top"> <!-- centering table // --> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" valign="top"> <!-- flexible container // --> <table border="0" cellpadding="0" cellspacing="0" width="500" class="flexiblecontainer"> <tr> <td valign="top" width="500" class="flexiblecontainercell"> <!-- content table // --> <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="right" valign="middle" class="flexiblecontainerbox"> <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:100%;"> <tr> <td align="right" valign="middle" class="flexiblecontainerbox"> <table class="flexiblecontainerboxnext" border="0" cellpadding="0" cellspacing="0" width="210" style="max-width:100%;"> <tr> <td align="left" class="textcontent"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:and9gcsn7rd-ot8zaunwwvnbeieziduacgow2sijgdt-ngcbbwrv3ebn4tgde1xk" width="800" class="flexibleimage" alt="text" title="logo" /> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <!-- // flexible container --> </td> </tr> </table> <!-- // centering table --> </td> </tr> <!-- // end --> </table> <table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="800" id="emailbody"> <tr> <td align="center" valign="top"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" valign="top"> <table border="0" cellpadding="0" cellspacing="0" width="800" class="flexiblecontainer"> <tr> <td align="center" valign="top" width="500" class="flexiblecontainercell"> <!-- content table // --> <!-- content table first element that's entirely separate structural framework of email. --> <table border="0" cellpadding="30" cellspacing="0" width="100%"> <tr> <td align="center" valign="top" class="textcontent"> <h2 style="line-height:100%;font-family:helvetica,arial,sans-serif;font-size:34px;font-weight:normal;margin-bottom:5px;text-align:center;">an article has been shared you!</h2> <h3 style="text-align:center;font-family:helvetica,arial,sans-serif;font-size:24px;margin-bottom:0;line-height:135%;"><span style="color:#df5d5d;">user name</span> shared:</h3> </td> </tr> </table> <!-- // content table --> </td> </tr> </table> <!-- // flexible container --> </td> </tr> </table> <!-- // centering table --> </td> </tr> <tr> <td align="center" valign="top"> <!-- centering table // --> <table border="0" cellpadding="40" cellspacing="0" width="100%"> <tr> <td align="center" valign="top"> <!-- flexible container // --> <table border="0" style="margin-top:-33px" cellpadding="5" cellspacing="0" width="600" height="222" class="flexiblecontainer"> <tr style="background:#eff0f2;"> <td valign="top" width="500" class="flexiblecontainercell"> <!-- content table // --> <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="left" valign="top" class="flexiblecontainerbox"> <table border="0" cellpadding="0" cellspacing="0" width="210" style="max-width:100%;"> <tr> <td align="left" class="textcontent"> <img src="http://www.caribbeanbelleweddings.com/wp-content/uploads/2013/03/slide-circle-green.png" width="210" class="flexibleimage" style="max-width:100%;height:216px" alt="text" title="text" /> </td> </tr> </table> </td> <td align="left" valign="center" class="flexiblecontainerbox"> <table class="flexiblecontainerboxnext" border="0" cellpadding="0" cellspacing="0" width="210" style="max-width:100%;"> <tr> <td align="left" class="textcontent"> <h3 style="color:#5f5f5f;line-height:125%;font-family:helvetica,arial,sans-serif;font-size:20px;font-weight:normal;margin-top:0;margin-bottom:3px;text-align:left;">tales of travelling , working abroad</h3> <div style="text-align:left;font-family:helvetica,arial,sans-serif;font-size:15px;margin-bottom:0;color:#5f5f5f;line-height:135%;">www.nytimes.com</div> </td> </tr> </table> </td> </tr> </table> <!-- // content table --> </td> </tr> </table> <!-- // flexible container --> </td> </tr> </table> <!-- // centering table --> </td> </tr> <tr bgcolor="#eef0f2"> <td align="center" valign="top"> <!-- centering table // --> <table border="0" cellpadding="40" cellspacing="0" width="100%"> <tr > <td align="center" valign="top"> <!-- flexible container // --> <table border="0" cellpadding="30" cellspacing="0" width="500" class="flexiblecontainer"> <tr> <td style="padding-bottom:0;" valign="top" width="500" class="flexiblecontainercell"> <!-- content table // --> <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" valign="top" class="flexiblecontainerbox"> <table border="0" cellpadding="0" cellspacing="0" width="90" style="max-width:100%;"> <tr> <td align="left" class="textcontent"> <img src="http://www.caribbeanbelleweddings.com/wp-content/uploads/2013/03/slide-circle-green.png" width="73" class="flexibleimagesmall" style="max-width:100%;" alt="text" title="text" /> </td> </tr> </table> </td> </tr> </table> <!-- // content table --> </td> </tr> </table> <!-- // flexible container --> </td> </tr> </table> <!-- // centering table --> </td> </tr> <!-- // module row --> <!-- module row // --> <tr style="background:#eef0f2"> <td align="center" valign="top"> <!-- centering table // --> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" valign="top"> <!-- flexible container // --> <table border="0" cellpadding="30" cellspacing="0" width="500" class="flexiblecontainer"> <tr> <td style="padding-top:0;" align="center" valign="top" width="500" class="flexiblecontainercell"> <!-- content table // --> <table align="left" border="0" cellpadding="0" cellspacing="0" class="flexiblecontainer"> <tr> <td align="left" valign="top" class="textcontent"> <div style="text-align:left;font-family:helvetica,arial,sans-serif;font-size:15px;margin-bottom:0;margin-top:10px;color:#5f5f5f;line-height:135%;">pellentesque habitant morbi tristique senectus netus malesuada et fames ac turpis egestas. vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</div> </td> </tr> </table> <!-- // content table --> </td> </tr> </table> <!-- // flexible container --> </td> </tr> </table> <!-- // centering table --> </td> </tr> <!-- // module row --> <!-- module row // --> <tr style="background:#eef0f2"> <td align="center" valign="top"> <!-- centering table // --> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" valign="top"> <!-- flexible container // --> <table border="0" cellpadding="0" cellspacing="0" width="800" class="flexiblecontainer"> <tr> <td valign="top" width="500" class="flexiblecontainercell"> <!-- content table // --> <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="left" valign="top" class="flexiblecontainerbox"> <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:100%;"> <tr> <td align="right" valign="middle" class="flexiblecontainerbox"> <table class="flexiblecontainerboxnext" border="0" cellpadding="0" cellspacing="0" width="210" style="max-width:100%;"> <tr> <td align="left" class="textcontent"> <img src="http://t0.gstatic.com/images?q=tbn:and9gcrizb29yamj68dnkayeufr7kmiojd8rmf1etlqqrdfi6f0xg_3h" width="800" class="flexibleimage" alt="text" title="logo" /> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <!-- // content table --> </td> </tr> </table> <!-- // flexible container --> </td> </tr> </table> <!-- // centering table --> </td> </tr> <!-- // module row --> <!-- module row // --> </table> </td> </tr> </table> </center> </body> </html> any suggestion helpful me.
the fact outlook uses word rendering message bodies. background properties not supported in word. can read more supported , unsupported html elements, attributes, , cascading style sheets properties in following series of articles in msdn:
- word 2007 html , css rendering capabilities in outlook 2007 (part 1 of 2)
- word 2007 html , css rendering capabilities in outlook 2007 (part 2 of 2)
hope help.
Comments
Post a Comment