HTML news letter background images are not attached to Ms out look

I tried to create html news letter with background images. But when i select 'page by email" to out look there is not background images. what is the solution for me. I tried 2 solution in this forum. but those are not worked for me.

This is my html code.

<!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>Inside Unilever Sri Lanka</title>
<style type="text/css">
body {
    background-color: #fff;
    font-family:Arial, Helvetica, sans-serif;
}
td {
    color:#FFF;
    vertical-align:top;
}
h1 {
    font-size:20px;
    color:#FFF;
    font-weight:normal;
    display:block;
    text-decoration:underline;
    text-align:left;
}
h4 {
    margin-bottom:5px;
    margin-top:5px;
    text-decoration:underline;
    text-align:left;
}
.main_article_img_top img {
    width:289;
    height:217;
}
.art_text {
    font-size:13px;
    line-height:16px;
    text-align:left;
    color:#000;
}
div.art_content {
    padding-bottom:7px;
    padding-left:7px;
    padding-right:7px;
}
.read_more {
    margin-top:8px;
}
.contact {
    width:300px;
    float:right;
    margin-top:60px;
    text-align:left;
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
  <table width="697" bgcolor="#FFFFFF">
    <!--header-->
    <tr>
      <td align="center"><table border="0" width="697" style="margin-bottom:-8px;" >
          <tr>
            <td colspan="2" height="139" style="background-image:url('http://ribelz.org/news/images/header-img.png'); background-repeat:no-repeat; ">
            <div style="width:110px; margin-top:60px; margin-left:300px;text-align:right;color:#000;font-weight:900;text-transform:uppercase;">March</div>
            </td>
          </tr>
        </table></td>
    </tr>
    <!--header end-->
    <tr style="background-image:url(http://ribelz.org/news/images/mainRepeat-bg.png); background-repeat:repeat-y;">
      <td style="padding-left:17px; padding-right:17px; margin-bottom:-5px;">
      <!-- content -->
        <table border="0" width="600" cellspacing="0">
          <tr>
            <td><table width="660" border="0" cellspacing="0">
                <tr>
                  <td bgcolor="#6ba539"><img src="images/main-article.jpg" /></td>
                  <td bgcolor="#6ba539" style="padding:10px;">
                      <div class="head_art_title">
                        <h1>Unilever launches global no smoking policy</h1>
                      </div>
                    <div class="art_text">    This week the most popular article on the News Centre was about Unilever’s workplace non-smoking policy going global. Visit the site to read this story and many others. You can get there by clicking on the News Centre link in the top left corner of Inside.Unilever.</div>
                    <div class="read_more"><img src="images/read-more.jpg" /></div>
                  </td>
                </tr>
            </table></td>
          </tr>
          <tr>
            <td><table width="660" border="0" cellspacing="10" style="padding:5px;">
                
                <tr style="padding-top:10px;">
                  <td bgcolor="#6ba539" width="200">
                      <div class="art_img"><img src="images/news-item-4.jpg" /></div>
                    <div class="art_content">
                        <div class="art_title">
                          <h4>Unilever launches global no smoking policy</h4>
                        </div>
                        <div class="art_text">All workplaces aim to s free by mid-2012</div>
                        <div class="read_more"><img src="images/read-more.jpg" /></div>
                    </div>
                  </td>
                   <td bgcolor="#6ba539" width="200">
                      <div class="art_img"><img src="images/news-item-5.jpg" /></div>
                    <div class="art_content">
                        <div class="art_title">
                          <h4>Unilever launches global no smoking policy</h4>
                         </div>
                        <div class="art_text">All workplaces aim to s free by mid-2012</div>
                        <div class="read_more"><img src="images/read-more.jpg" /></div>
                    </div>
                  </td>
                   <td bgcolor="#6ba539" width="200">
                      <div class="art_img"><img src="images/news-item-6.jpg" /></div>
                    <div class="art_content">
                        <div class="art_title">
                          <h4>Unilever launches global no smoking policy</h4>
                         </div>
                        <div class="art_text">All workplaces aim to s free by mid-2012</div>
                        <div class="read_more"><img src="images/read-more.jpg" /></div>
                    </div>
                  </td>
                </tr>
                <!-- row 2 -->

                <tr style="padding-top:10px;">
                  <td bgcolor="#6ba539" width="200">
                      <div class="art_img"><img src="images/news-item-1.jpg" /></div>
                    <div class="art_content">
                        <div class="art_title">
                          <h4>Unilever launches global no smoking policy</h4>
                         </div>
                        <div class="art_text">All workplaces aim to s free by mid-2012</div>
                        <div class="read_more"><img src="images/read-more.jpg" /></div>
                    </div>
                  </td>
                   <td bgcolor="#6ba539" width="200">
                      <div class="art_img"><img src="images/news-item-2.jpg" /></div>
                    <div class="art_content">
                        <div class="art_title">
                          <h4>Unilever launches global no smoking policy</h4>
                         </div>
                        <div class="art_text">All workplaces aim to s free by mid-2012</div>
                        <div class="read_more"><img src="images/read-more.jpg" /></div>
                    </div>
                  </td>
                   <td bgcolor="#6ba539" width="200">
                      <div class="art_img"><img src="images/news-item-3.jpg" /></div>
                    <div class="art_content">
                        <div class="art_title">
                          <h4>Unilever launches global no smoking policy</h4>
                         </div>
                        <div class="art_text">All workplaces aim to s free by mid-2012</div>
                        <div class="read_more"><img src="images/read-more.jpg" /></div>
                    </div>
                  </td>
                </tr>
            </table></td>
          </tr>
        </table>
        <!--end of content --></td>
    </tr>
    <!--footer start-->
    <tr>
      <td style="background-image:url(http://ribelz.org/news/images/bottom-img.png); background-repeat:no-repeat; height:183px; padding-right:30px; ">
          <div class="contact">    
            <div>
              <h1 style="margin:0; text-decoration:none;">Contact the Team</h1>
          </div>
            <div style="font-size:14px; margin-top:4px;">If you would like to comment, give general feedback or suggest an idea for a news story</div>
            <div style="margin-top:8px;"><img src="images/go.png" /></div>
        </div>
      </td>
    </tr>
  </table>
</center>
</body>
</html>

Need a solution.
Thank you.

roshodgekiss roshodgekiss, 3 years ago

Hi malinga91, welcome to the forums. You may want to try the following:

- adding the background="http://ribelz.org/news/images/header-img.png" attribute to the <td> 's in the header and footer.
- Try using this Outlook background image solution

Using this two-punch, you should be able to display the background images in your design, in pretty much any email client. All the best!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Alex I., 3 years ago

Hi Malinga91!

I've just posted a blog about this issue with a nice way to get backgrounds working perfectly on all clients. Check it out here: http://teamemail.wordpress.com/

Happy to take any questions you have,
Alex.

Sign up for free.
Then send campaigns for as little as $9/month

Create an account