How would I add a dark overlay to a background image?

SOLVE
Highlighted
New Contributor

How would I add a dark overlay to a background image?

 

Here's the code I'm using:

 

<table cellpadding="0" cellspacing="0" border="0" style="min-width: 100%; width: 100%;">
<tr>
<td background="{{ widget.background_image.src }}" style="background-size: cover; background-image: url('{{ widget.background_image.src }}');" bgcolor="{{ heroBackgroundColor }}" valign="top">

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px;">
<v:fill type="tile" src="{{ widget.background_image.src }}" color="#eeeeee" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->

<div>
<table width="400" style="min-width: 100%; width: 100%;">
<tr>
<td colspan="3" height="10"></td>
</tr>
<tr>
<td width="{{ widget.logo.width }}" style="padding-left: 15px;">
{% if widget.logo.src %}
<img src="{{ widget.logo.src }}" width="{{ widget.logo.width }}" height="{{ widget.logo.height }}" alt="{{ widget.logo.alt }}">
{% endif %}
</td>

<tr>
<td colspan="3" height="50">&nbsp;</td>
</tr>
<tr>
<td colspan="3" valign="middle" align="center" style="font-family: Helvetica, Arial, Verdana, Trebuchet MS, sans-serif; font-weight: 900; font-size: 30px; color: #ffffff;">{{ widget.heading }}</td>
</tr>
<tr>
<td colspan="3" height="15" style="font-size: 0px;"></td>
</tr>
<tr>
<td colspan="3" valign="middle" align="center" style="font-family: Helvetica, Arial, Verdana, Trebuchet MS, sans-serif; text-align: center; font-weight: 900; font-size: 14px; color: #ffffff;">{{ widget.subheading }}</td>
</tr>
<tr>
<td colspan="3" height="20" style="font-size: 0px;"></td>
</tr>
<tr>
<td colspan="3" valign="middle" align="center" style="text-align: center; font-size: 14px; color: #ffffff;">{{ widget.cta }}</td>
</tr>
<tr>
<td colspan="3" height="50">&nbsp;</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
<p style="margin:0;mso-hide:all"><oSmiley Tongue xmlnsSmiley Surprised="urn:schemas-microsoft-comSmiley SurprisedfficeSmiley Surprisedffice">&nbsp;</oSmiley Tongue></p>
</v:textbox>
</v:rect>

<xml>
<oSmiley SurprisedfficeDocumentSettings>
<o:AllowPNG/>
<oSmiley TongueixelsPerInch>96</oSmiley TongueixelsPerInch>
</oSmiley SurprisedfficeDocumentSettings>
</xml>

<![endif]-->
</td>
</tr>
</table>

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Regular Contributor | Silver Partner
box-shadow: inset 0 0 0 300px rgba(0,0,0,.5);


You can add something like that to the background-image. Adjust the .5 for lighter or darker and 300px can be bigger if it doesn't fill the area.

Reply
0 Upvotes
5 Replies 5
Community Manager

Hey @Ghost,

 

Do you have a link to the page you're working on? The more information, details and screenshots you can provide the better the Community can assist!

 

Thanks,
Jenny


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Regular Advisor | Platinum Partner

maybe not the answer you want, but use an image that has the overlay applied in photoshop or your image editor of choice. 

Already pushing the limits with a background image in email. 

a solution may be here

 

godspeed

dennis
Reply
0 Upvotes
Regular Contributor | Silver Partner
box-shadow: inset 0 0 0 300px rgba(0,0,0,.5);


You can add something like that to the background-image. Adjust the .5 for lighter or darker and 300px can be bigger if it doesn't fill the area.

Reply
0 Upvotes
Regular Advisor | Platinum Partner

Just understand that rgba is not going to work everywhere .

dennis
Reply
0 Upvotes
New Contributor

Thank you!! This worked!

Reply
0 Upvotes