Before you start
Things you need to know:
Not all email clients support background images; for example, they don’t work in Microsoft Outlook for Windows.
It’s impossible to consistently control the size and position of background images, particularly on mobile.
You can add background images to Dotdigital email templates and campaigns. However, you must edit the HTML source code to do so.
Always add a fallback background colour for when the image doesn’t load.
Avoid background images that contain essential visual information, as contacts viewing the email in Microsoft Outlook for Windows, won't see it.
Test different email clients, especially mobile ones, to ensure that the background fits the desired area when viewing different screen sizes.
Our support team are not able to help you with any custom code changes.
Add a background image to an email template or campaign
Resize your chosen background image to an appropriate size and shape (in pixels) using photo editing software.
It needs to be big enough to fill the block in which you want to use it.
Ensure the image is tall enough to work on mobile, where headings may break onto multiple lines or columns stack above one another.
If the image is not large enough, the content might spill over the background edge, or the background might repeat.
Upload your image to your Dotdigital account in the usual way. Locate it in the Image Manager, and double-click it.
Right-click the image and select Copy image address, Copy image location, or similar – this varies depending on your browser.
Paste the URL you just copied somewhere safe – for example, notepad.
In Dotdigital, open your email campaign or template in EasyEditor.
Add a background colour to the same block you want to add the background image to.
Expand the Utilities drop-down menu and select Edit source.
In the HTML, find the table you want to add the background image to.
If you’re replacing a background image rather than adding a new one, select the HTML code, and search for
background-image:to find the correct code.Enter background-image: url('paste-image-url-here'); to the table’s style attribute.
Replace paste-image-url-here with the image address you copied earlier. (Be sure to keep the single quotes that surround it.)
You can also add further CSS properties such asbackground-position,background-sizeandbackground-repeat, however these are not supported consistently across all email clients.
When complete, select Edit design to return to the design view.
Once you're done, check the mobile, desktop, and tablet previews in EasyEditor, and perform test sends to different devices to ensure the background renders as planned.