CODEWITHSUNDEEP
htmlcssemail
WebWilliam
WebWilliam

Reputation: 37

HTML email BG color issues

I want to send the following page as an html email. It displays fine on the web but in the email the red background doesnt display for the body or the button at the bottom of the page. What am I missing here?
HTML email has been giving me so much trouble! Thanks for any help i can get!

http://www.americanvineyardmagazine.com/emails/AVvid14email.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>American Vineyard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 </head>

 <style type="text/css">
th td tr {
    text-align: center; 
}
 </style>

 <body style="padding: 0;background-color:#800000">



  <table align="center" style="background-image:url(../images/intro.png); max-width:650px;background-color:#800000" cellpadding="0" cellspacing="0">
     <th style="color:#800000; width:650px;"><h1>New Video On American Vineyard Website!</h1></th>
     <tr>
         <td style="text-align:center;">
            <a href="http://www.americanvineyardmagazine.com/index.html#modal-video14">
                <img src="http://americanvineyardmagazine.com/images/video.play.png"  alt="http://americanvineyardmagazine.com/images/featvideos/featvideo14.jpg" width="300px" style="background:URL(http://www.americanvineyardmagazine.com/images/featvideos/featvideo14.jpg) center center no-repeat;">
            </a>
        </td>

     </tr>
    <tr>
        <td style="text-align:center; color:#800000; ">
            <h2><em>El Niño Amplifies Risk for Vine Canker Disease </em></h2>
        </td>       
     </tr>
    <tr>
        <td style="text-align:center; color:#800000; ">
        <h5>With El Niño coming strong for the next few months, grape growers are grateful for the drought relief; however, pruning is going to be a difficult task this winter with increased disease pressure. Doug Gubler, UC Davis Plant Pathologist addressed this at the SJV Grape Symposium.</h5>
        </td>       
    </tr>


   <tr>
     <td style="text-align:center;padding-bottom:35px;">


         <a href="http://www.americanvineyardmagazine.com#modal-video14" style="background-color:#800000;border:1px solid #800000;border-radius:3px;color:#FFFFCC;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;">Watch Now!</a>

     </td>
   </tr>


  </table>


 </body>




 </html>

Upvotes: 0

Views: 118

Answers (2)

Akshay Gupta
Akshay Gupta

Reputation: 361

The problem is in your table's background path. You are using a relative path here..

  <table align="center" style="background-image:url(../images/intro.png); max-width:650px;background-color:#800000" cellpadding="0" cellspacing="0">

It will display correctly on the web because browser will be able to resolve that. But when you use it in an email, Email client won't be able to resolve that.

Use absolute path here instead.

<table align="center" style="background-image:url(http://www.americanvineyardmagazine.com/images/intro.png); max-width:650px;background-color:#800000" cellpadding="0" cellspacing="0">

Upvotes: 1

Kshiteej Jain
Kshiteej Jain

Reputation: 23

Use parent class under body tag .wrapper {background-color: #800000;}

Upvotes: 0

Related Questions