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

[Ghost]

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"><o:p xmlns:o="urn:schemas-microsoft-com:office:office">&nbsp;</o:p></p>
</v:textbox>
</v:rect>

<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>

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

[dennisedson]

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

[JanetArmstrong · Accepted solution]

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.

[Ghost]

Thank you!! This worked!

[dennisedson]

Just understand that rgba is not going to work everywhere .

[jennysowyrda]

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