Background Images provide design interest to your emails while still allowing you to utilize the power of live text. This occurs because background images are applied to a Composer structure not within a Composer structure. Within a Composer structure you will still be able to use live text in headlines, buttons, or text elements.
As you can see in the example below the second structure has a background image applied that fit the theme of the email about warm sweaters. Multiple pieces of text and a shop now button are then added within the one column Composer structure to complete the design.
Adding a Background Image
Navigate to an email built with Listrak Composer, or Create a New Message.
Click the Row of a component. Click on the space outside the message content (dotted lines).
On the right-hand side of the palette, scroll to the Background Image section. Click Browse or enter an Image Source.
Select an image from the Media Library or enter an Image Source.
Adjusting the Properties
After an image is inserted into the message, you can:
Control the width of the image
Full Width images expand beyond the 600px border of the content, like the example above
Fit to Content images will only show behind the 600px space of the content in the row
Remove the image
Adjust the spacing and border of the row
Adding a Background Color
Not all email programs will display a background image. To help ensure proper rendering of your email, a background color should be used. This background color is often the dominant color of the background image, but can be any color.
In the properties panel, locate the Row Properties.
Select the row background color (for full width) or content background color (for fit to content)
Specify a recently used color, new hex value, or use the color picker to select a color.
Adding Additional Content
After a background image has been added, drag and drop different content elements to build your email. All of the properties remain for these elements.
In the example, three different text components and a button were added.
Suggested Dimensions
Full-width images display best at a minimum width of 1440px.
Fit-to-content images should be 600px wide.
Image resolution should be 72 dpi with a low or medium quality for reduced file size and optimal download speed.
If an image is too small to fill the width/height of a container or has an image resolution greater than 72 dpi, the image will tile/repeat in some inboxes, such as Outlook. Other inboxes may render the image at its natural file size instead of scaling to fit. Refer to the image specs above.
🎨 Design Tips
Be sure to not include any crucial content within the background image as it won't display when images are turned off (which is about 50% of the time).
Full-width background images are not supported in Outlook (2007, 2010, 2013, and 2016) desktop inboxes. Be sure to apply a row or content background color as a fallback.
Keep it simple. Use a grid layout and avoid including complicated graphics that could distract from overlaid text.
Assign a complimentary backup background color to display when images are turned off.
Optimize your images to ensure faster download speeds. Readers are viewing emails on many different screen sizes and with varying levels of connection speeds, so it's important to consider the size of the content being delivered.
Always save your background image at the size it's intended to be in the email. If your email is 600px wide and you want the background image to expand to the edges, be sure to save the image at 600px.
