CMS Development

DougieD
Member

Background Image in Email Solution?

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>

 

0 Upvotes
4 Replies 4
Jsum
Key Advisor

Background Image in Email Solution?

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.

 

0 Upvotes
nschurdell
Contributor

Background Image in Email Solution?

@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.

0 Upvotes
DougieD
Member

Background Image in Email Solution?

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

 

Take good care,

Doug

0 Upvotes
nschurdell
Contributor

Background Image in Email Solution?

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

0 Upvotes