Before we go through the code, let's see which clients will show the background CSS styling and which need the help of a VML fallback. The good news: background CSS support has improved, with webmail clients now fully supporting this method, meaning the background HTML attribute is no longer required . The bad news: Unfortunately, Windows 10 Mail just doesn't like background images. It will not deprecate the inline CSS or HTML background attribute. And applying VML will cause rendering issues with an "image cannot be displayed" error message. If you're concerned about the experience for Windows 10 Mail subscribers,
What email clients do your subscribers use? Take a look at your own email client market share with Litmus Email Analytics. Find out which email clients you need to optimize your background images for. (Tip: If Windows 10 Mail is weak, don't worry.) Read more → Now that we've got that sorted, let's talk code! One of the fun things about Image Masking Service adding background images to your emails is that there are different ways you can do this. You can fill a small section or cover the body of your email, use a single image or a repeating pattern, and you can change your background images depending on whether your reader is on desktop, mobile,
light mode , dark mode or even when they hover or hover over your image. Each technique requires a different approach, so let's take a look at the best ways to code them. Fixed or fixed width background image fixed width background When applying background images, it's always best to add your code to the containing table cell. Application to any other HTML element such as <table> or is unlikely to be supported by some email clients. This is what it should look like: Here, the image is scaled to the width and height of the cell by including background-size:cover in the inline CSS styles, and then positioned in the center. Adding these styles allows you to use a 2x image, which means you'll see a crisp render on Retina displays,