CODEWITHSUNDEEP
htmlcssemailcss-selectorshtml-email
Mohamed Sahir
Mohamed Sahir

Reputation: 2543

background property is not working in Html table tag for Email template

enter image description hereNote: email template is working fine with browser,when attach the email template in outlook window ,img src attribute image gets displayed but below code is not working.

Today i have faced an issue with an email template in html and css, i have send the mailer template from outlook , but the backgroud:url("https://image.flaticon.com/teams/new/1-freepik.jpg") inside the table.

This is the below piece of code have problem.

I have tried to insert the image in table tag ,still image is not displayed.

Method 1:

<table background="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR32QTbkvVrRO2yxIKRhT9aN0xj7otdnQetREdz2RVG0AVk3hcP" class="ban-hei" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background-size:cover;" height="380">

Method 2:

<table  class="ban-hei" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background:url(https://image.flaticon.com/teams/new/1-freepik.jpg); background-size:cover;" height="380">

Method 3:

<table  class="ban-hei" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background-image:https://image.flaticon.com/teams/new/1-freepik.jpg; background-size:cover;" height="380">

Nothing works expect img src="tag"

Upvotes: 0

Views: 1561

Answers (1)

Mario Andrade
Mario Andrade

Reputation: 515

Email templates ca be tricky. I would advice you to add the background image on a TD tag and not a Table, like so:

<table  class="ban-hei" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" height="380"> 
  <tr>
    <td style="background:url(https://image.flaticon.com/teams/new/1-freepik.jpg); background-size:cover;"></td>
  </tr>
</table>

Inside the TD add another table with the rest of the content of your template.

<table  class="ban-hei" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" height="380"> 
  <tr>
    <td style="background:url(https://image.flaticon.com/teams/new/1-freepik.jpg); background-size:cover;">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>Email content in here </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

If, for some reason, this doesn't work for you, I advise you to visit backgrounds.cm and see their v:fill code for background images in tables that looks something like this:

<td background="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR32QTbkvVrRO2yxIKRhT9aN0xj7otdnQetREdz2RVG0AVk3hcP" bgcolor="#7bceeb" width="225" height="225" valign="top">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:225px;height:225px;">
    <v:fill type="tile" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR32QTbkvVrRO2yxIKRhT9aN0xj7otdnQetREdz2RVG0AVk3hcP" color="#7bceeb" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div>
  </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>

Upvotes: 2

Related Questions