Background Image in Email Solution?

[DougieD]

Hello!

Can anyone help me troubleshoot why the background image in this custom module won't display?

Here's what I'm trying to do in the module. Thanks!

<table class="desktop" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center"><table width="600" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="text-align: center;"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="{% if widget.background_img.src %}
<img src="{{ widget.background_img.src }}" width="{{ widget.background_img.width }}" height="{{ widget.background_img.height }}" alt="{{ widget.background_img.alt }}">
{% endif %}" bgcolor="#FFFFFF" width="600" height="393" valign="top" style="font-family: 'Raleway', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 18px; color: #FFFFFF; "><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" valign="top" style="width:600px;height:393px;text-align:center; font-family: 'Raleway', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 18px; color: #FFFFFF;">
<v:fill type="frame" src="{% if widget.background_img.src %}
<img src="{{ widget.background_img.src }}" width="{{ widget.background_img.width }}" height="{{ widget.background_img.height }}" alt="{{ widget.background_img.alt }}">
{% endif %}" color="#FFFFFF" />
<![endif]-->

<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="center" style="text-align:center; font-family: 'Raleway', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 18px; color: #036AAB; padding-top: 125px;"><span style="font-size: 34px; line-height: 37px; font-family: 'Permanent Marker', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;">{{ widget.text_34px }}</span><br>
<br>
{{ widget.text_15px }}<br>
Annual Meeting</td>
</tr>
</table>

<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>

[Jsum]

There are a few things that might fix this for you. 

First, html attributes like background are depricated. If possible you should use in-line styling, so:

<td background="{% if widget.background_img.src %}
<img src="{{ widget.background_img.src }}" width="{{ widget.background_img.width }}" height="{{ widget.background_img.height }}" alt="{{ widget.background_img.alt }}">">

could be 

<td style="background: url({% if widget.background_img.src %}
<img src="{{ widget.background_img.src }}" width="{{ widget.background_img.width }}" height="{{ widget.background_img.height }}" alt="{{ widget.background_img.alt }}">)">

But a major thing I notices is your quotation nesting, and the fact that you are using an image tag inside of a td tag. both of these are breaking your code undoubtably. also background images are not elements. They take on a different attributes as they become a peice of styling. Your have width, height, alt, etc. Background images cannot use the attributes. Let me clean it up a bit:

<td style="background: url({% if widget.background_img.src %}
{{ widget.background_img.src }}{% endif %});" >

I set a background url containing your if statement. if bakground_img contains src then the src is printed. a more solid way to set a background image is to set position, repeat, and size.

<td style="background: url({% if widget.background_img.src %}
{{ widget.background_img.src }}{% endif %}) center center no-repeat; background-size: cover;" >

so here is that opening td tag with the updated background image code:

<td style="background: url({% if widget.background_img.src %}
{{ widget.background_img.src }}{% endif %}) center center no-repeat; background-size: cover; font-family: 'Raleway', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 18px; color: #FFFFFF;" bgcolor="#FFFFFF" width="600" height="393" valign="top">

A couple of rules for in-line styling, you should use proper css within the style attribute as much as possible and pay close attention to nested quotations marks. It doesn't matter if you do " ' ' "  or  ' " " ' but you should make sure that you aren't trying to do something like " " " " or ' ' ' ' because it will break your code in the worst way. 

I hope this helped.

[nschurdell]

@DougieD try this format instead...

<img src="{{ widget.background_img.src.value }}" 

We have sometimes had to add .value to variables to get them to be read properly.

[DougieD]

Thank you! That got me closer for sure. I'm reaching out to support for a little help, too.

Take good care,

Doug

[nschurdell]

@DougieD sounds good. Hope you find the solution you need.