

HTML becomes much more approachable when you know what everything means. We’re going to go through the below block piece by piece, but you can copy/paste this code into your HTML and simply change the content: The code below covers every instance where background images are now supported. What’s the difference between HTML and CSS? HTML is the code that creates and adds function to an email CSS is the code that makes it aesthetically pleasing. These accounts now support background images on both iOS and Android, thanks to a simple fix using the CSS background property, with the properties values set in shorthand. Gmail app for non-Gmail accounts (GANGA) are the email clients you see listed when you go to set up your email on mobile. Justin Khoo over at FreshInbox discovered another email client that, until late last year, we didn’t know supported background images. WebKit emails and the vast majority of modern email clients can use the normal CSS or HTML background attribute. Tip: to calculate image size using points (pt) multiply the pixel value by 0.75.
#Css background image resize block display windows 10
Windows 10 also has similar quirks, but needs even more information than earlier Outlook versions, mainly the width and height being in point (pt) format instead of pixels.

All desktop versions of Outlook need vector markup language (VML) to display the image correctly, as they use the Microsoft Word rendering engine. If you’d like to jump ahead, don’t let us stop you:Īdding background images can cause some headaches. Here’s a comprehensive list of email clients that support background images.

Here, we’ll run through everything you need to get HTML background images to work in all the clients that support them, as well as the different ways to include color in your HTML email. Background color and images can really add to the look and feel of an email.
