TechQA.

background image not working in html newsletters

709 views Asked by At

I am creating a newsletter for email, and i add background image for newsletter but the background image is not showing of table in email. I need to give the online path of an image. Is there is any mistake in code? Please help me.

Here is my code: 

<style type="text/css">
  .position{
    font-family:century gothic !important;
    font-size:20px;
    color:white;
    font-weight:bold;
    text-decoration:underline;
    line-height:1.2;
  }
  .location,.condition{
    font-family:century gothic !important;
    font-size:17px;
    color:white;
  }
  .apply_info{
    font-family:century gothic !important;
    font-size:20px;
    color:black !important;
  }
</style>
</head>
<body>
  <div class="container">
    <table  border="0" width="100%" background="http://i67.tinypic.com/i69xzq.jpg" class="tbl_wrapper" style="text-align:center;color:black;background-repeat:no-repeat;background-size:100%">
      <tr>
        <td>
          <table width="100%">
            <tr height="162px"></tr>
            <tr>
              <td colspan="2">
                <table width="100%">
                  <tr><td style="font-family:Monoton; font-size:200px;color:#0099ff;text-shadow:3px 3px white;text-align:right">NOW</td></tr>
                  <tr><td style="font-family:Monoton; font-size:200px;color:#0099ff;text-shadow:3px 3px white;text-align:right">HIRING</td></tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <tr>
        <td>
          <table width="100%">
            <tr>
              <td style="text-align:right">
                <table width="100%" style="font-size:40px;color:red;font-weight:bold;font-family:century gothic">
                  <tr>
                    <td>JOIN THE TEAM</td>

                  </tr>
                </table>
              </td>
              <td width="200px" height="20px" bgcolor="red"></td>
            </tr>
          </table>
        </td>
      </tr>

      <tr>
        <td>
          <table width="100%">
            <tr>
              <td width="200px" height="20px" bgcolor="red"></td>
              <td style="text-align:left">
                <table width="100%" style="font-size:40px;color:red;font-weight:bold;font-family:century gothic">
                  <tr>
                    <td>OPEN POSITIONS</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <tr>
        <td colspan="4">
          <table width="100%">
            <tr>
              <td>
                <table width="100%">
                  <tr>
                    <td class="position" colspan="3">IT Support</td>
                  </tr>
                  <tr>
                    <td  class="location" colspan="3">Delhi</td>
                  </tr>
                  <tr>
                    <td class="condition" colspan="3">(Freshers can also apply)</td>
                  </tr>
                  <tr>
                    <td class="position" colspan="3">OPS Executive</td>
                  </tr>
                  <tr>
                    <td class="location" colspan="3">Delhi & Jaipur</td>
                  </tr>
                  <tr >
                    <td class="condition" colspan="3">(Freshers can also apply)</td>
                  </tr>
                  <tr>
                    <td class="position" colspan="3">Data Base Expert</td>
                  </tr>
                  <tr> 
                    <td class="location" colspan="3">Delhi</td>
                  </tr>
                  <tr>
                    <td class="condition" colspan="3">(Experienced from premier/reputed institute)</td>
                  </tr>
                  <tr>
                    <td class="condition" colspan="3">Experience 3-5 Years</td>
                  </tr>
                  <tr>
                    <td class="position" colspan="3">Full Stack Developer</td>
                  </tr>
                  <tr>
                    <td class="location" colspan="3">Delhi</td>
                  </tr>
                  <tr>
                    <td class="condition" colspan="3">(Experienced from premier/reputed institute)</td>
                  </tr>
                  <tr>
                    <td class="condition" colspan="3">Experience 5-7 Years</td>
                  </tr>
                  <tr>
                    <td class="position" colspan="3">Sales Executives/Manager</td>
                  </tr>
                  <tr>
                    <td class="location" colspan="3">Delhi</td>
                  </tr>
                  <tr>
                    <td class="condition" colspan="3">Experience 3-5 Years</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr height="160px"></tr>

      <tr>
        <td>
          <table border="0" width="100%">
            <tr>
              <td>
                <table width="100%">
                  <tr>
                    <td width="400px" height="20px" bgcolor="red"></td>
                    <td style="text-align:center">
                      <table width="100%" style="font-size:30px;color:red;font-family:century gothic">
                        <tr>
                          <td>APPLY NOW</td>
                        </tr>
                      </table>
                    </td>
                    <td width="400px" height="20px" bgcolor="red"></td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>

        </td>
      </tr>
      <tr>
        <td>
          <table width="100%">
            <tr><td class="apply_info">[email protected]</td></tr>
            <tr><td class="apply_info">44E/9 First Floor, Kishangarh, Vasant Kunj, New Delhi-110070</td></tr>
            <tr><td class="apply_info">Phone-8373902513</td></tr>
            <tr><td><img src="http://i67.tinypic.com/rmk8ev.jpg" class="img-responsive center-block" style="height:80px" /></td></tr>
          </table>
        </td>
      </tr>
    </table>
  </div>

html css email html-email newsletter
Original Q&A
3

There are 3 answers

0
Besart Berisha On

Your image link is wrong, "http://i67.tinypic.com/rmk8ev.jpg" your link redirects to the tinypic.

Instead you should grab the image source link, which in your case would be "http://oi67.tinypic.com/rmk8ev.jpg"

This isn't a good practice, you should host your own images on your servers since tinpic can remove it.

0
nimaek On

I can't actually see the background-image in your CSS/HTML, which makes it hard to diagnose your specific issue.

But nonetheless, you will experience issues with background images when rendering in various email clients. Here's a comprehensive article on the topic, written by Litmus: https://litmus.com/community/learning/25-understanding-background-images-in-email

As mentioned in the article, the 'Bulletproof background images' tool at https://backgrounds.cm/ is really useful and includes VML code which will render background images in problem versions of Outlook.

1
Ted Goas On

Few things to try that piggyback on a few others answers here.

  • Update the image reference path to be http://i67.tinypic.com/i69xzq.jpg
  • Move the inline CSS for the background image down a few levels to a <td>.
  • Use background="http://i67.tinypic.com/i69xzq.jpg" (like you are), or try `style="background-image: http://i67.tinypic.com/i69xzq.jpg;". Avoid CSS shorthand.

  • Use Backgrounds.cm to generate VML code for Outlook.

    <body>
    <div class="container">
        <table  border="0" width="100%" class="tbl_wrapper">
            <tr>
                <td background="http://i67.tinypic.com/i69xzq.jpg" bgcolor="#ffffff" valign="top" style="text-align:center;color:black;background-repeat:no-repeat;background-size:100%"">
                    <!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
                    <v:fill type="tile" src="http://i67.tinypic.com/i69xzq.jpg" color="#ffffff" />
                    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                    <![endif]-->
                    <div>
                        <table width="100%">
                            <tr height="162px"></tr>
                            <tr>
                                <!-- Email Content -->
                            </tr>
                        </table>
                    </div>
                    <!--[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]-->
                </td>
            </tr>
        </table>
    </div>
</body>

This should give you pretty good coverage across email clients!

Related Questions in HTML

Related Questions in CSS

Related Questions in EMAIL

Related Questions in HTML-EMAIL

Related Questions in NEWSLETTER

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions