user123 user123 - 2 months ago 12
CSS Question

HTML Email : put transparent background color on image and text on it

I would like to have a text which is on transparent background layer and that background layer is on image.

As I am making HTML Emailer , so can't use

background-image
property. Have to use
img
tag.

How can I do so?



<table>
<tr>
<td>
<img src="http://www.hubilo.com/eventApp/ws/images/event/cover/facebook/thumb/2712_1467715620.jpg" style="width: 600px; height: 300px;">
</td>
</tr>
</table>





I want a transparent background color layer on the image and some text on the background color layer.

PS: I can't use
div
,
position
. have to stick to
table
tag and inline css only.

Thank You.

Answer

You can use two tables for that.

  <table class="main-background" width="600px" cellspacing="0" cellpadding="0" border="0" bgcolor="#222325" align="center" style="border-collapse: collapse;   mso-table-lspace: 0pt;mso-table-rspace: 0pt; background-repeat: no-repeat; background-size: cover;" background="http://www.hubilo.com/eventApp/ws/images/event/cover/facebook/thumb/2712_1467715620.jpg">
<tbody>
<tr>
<td height="300" valign="top" align="center" style="">                            
  <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; background:rgba(245,86,26,0.4);">
  <tbody>  <tr><td>Your Text</td></tr><tr><td>Your Text</td></tr><tr><td>Your Text</td></tr><tr><td>Your Text</td></tr></tbody></table>
  </td></tr></tbody></table>

Try using this code.

Comments