Background images

[stephenprovenzano]

For development with local images, it seems as though background image sources are not causing a copy of the image to be placed into the Build folder for the template.

Is this feature limited to <img tags alone? Or can this be handled for background: url('{{src}}'); and background="{{src}}" as well?

[maxlapides]

Currently, only <img> tags are supported for this feature. Would it be valuable to also support background images? I was under the impression that background images cannot be used in emails because of Outlook.

[stephenprovenzano]

@maxlapides It would be beneficial if we supported background images. Background images are supported in Outlook by utilizing VML (Microsoft's Vector Markup Language). I can provide some code examples if you'd like. But the bottom line as far as implementing them is we apply the background src in these three ways for each background for maximum compatibility:

<td background="path/to/image.jpg" style="background: #000 url('path/to/image.jpg') no-repeat center center;">

and Outlook:

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px; height: 400px;">
<v:fill type="fill" src="path/to/image.jpg" color="000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table>
<tr>
<td>Content to be surrounded with background image.</td>
<tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

So if there is a way to support background="", url(''), and src="" outside of an <img> tag that would definitely help.

[GEOSunited]

Hi, could I ask how to make love text above background image using this vml code? As now when email is received it is merged with image. (Trying this does email signature- outlook). Thanks