{"id":3431,"date":"2024-01-15T13:03:00","date_gmt":"2024-01-15T18:03:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email\/"},"modified":"2025-12-23T16:22:34","modified_gmt":"2025-12-23T21:22:34","slug":"the-ultimate-guide-to-background-images-in-email","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email","title":{"rendered":"How to Add an Email Background Image Easily (+ the Code to Do It!)"},"content":{"rendered":"\n\n\t<div id=\"simple-text-block-block_30036fa83af11034fb2ea9bd80868998\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h3>Key Takeaways<\/h3>\n<ul>\n<li>Enhancing email designs with background images adds depth and visual appeal to your campaigns, resulting in improved subscriber engagement and memorable brand experiences.<\/li>\n<li>Mastering email client compatibility helps you identify which email clients your subscribers use most frequently, so you can ensure seamless rendering and an optimized viewing experience.<\/li>\n<li>Applying best practices for email background images\u2014including contrast, simplicity, and fallback colors\u2014ensures your emails are accessible, readable, and effective across all subscriber devices and platforms.<\/li>\n<li>Implementing robust code solutions such as inline CSS and VML fallbacks guarantees your background images will consistently render, particularly in challenging email clients like Microsoft Outlook.<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Emails can feel a bit predictable with an image here and a block of text there. One way to liven up the subscriber experience? Background images! They add another dimension to your design, making your emails \u201cpop.\u201d When done well, they make your email feel like a million bucks.<\/span><\/p>\n<p>Keep reading for:<\/p>\n<ul>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#what-why\">The benefits of background images<\/a><\/li>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#examples\">5 creative examples of brands using background images<\/a><\/li>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#design\">Design considerations<\/a><\/li>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#code\">How to code background images<\/a><\/li>\n<\/ul>\n<h2 id=\"what-why\">What are background images? (And what\u2019s the point?)<\/h2>\n<p><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Background images<\/span><\/a><span style=\"font-weight: 400;\"> are images that are applied to the background of, or behind, an element.<\/span><\/p>\n<p>The major benefit of using background images is they allow you to place additional HTML content on top of them. Unlike other images, where only the image itself can exist in that space, background images provide layering possibilities, so you can have extra images, text, or <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/guide-to-ctas\" target=\"_blank\" rel=\"noopener\">calls-to-action (CTAs)<\/a> existing within that same space.<\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-31911 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/image-example.png\" alt=\"example of live HTML text and a bulletproof button over an email background image\" width=\"1200\" height=\"556\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/image-example.png 1200w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/image-example-300x139.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/image-example-1024x474.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/image-example-768x356.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/>\n<p><span style=\"font-weight: 400;\">Plus, by using live HTML text <\/span><i><span style=\"font-weight: 400;\">on top<\/span><\/i><span style=\"font-weight: 400;\"> of a background image, (versus a flattened image with text already on it), your message is readable when <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-email-image-blocking\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">images are turned off<\/span><\/a><span style=\"font-weight: 400;\">, making this a great technique for creating better, more <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/ultimate-guide-accessible-emails\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">accessible HTML emails<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p>Aside from helping to create campaigns that provide a better reading experience (especially with <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\" target=\"_blank\" rel=\"noopener\">web safe fonts<\/a>), background images also offer a wealth of design possibilities, <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/how-to-plan-your-email-campaign-strategy\" target=\"_blank\" rel=\"noopener\">setting your campaign apart<\/a> from the competition.<\/p>\n<h2 id=\"examples\"><span style=\"font-weight: 400;\">5 creative examples of brands using background images<\/span><\/h2>\n<p><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/miro.com\/\"><b>Miro<\/b><\/a> placed a background image containing shapes behind their hero section, drawing attention to the email\u2019s main headline and messaging, which is overlaid using live text.<\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/10\/1.png\" alt=\"\" \/><\/div>\n\n<p><em><span style=\"font-weight: 400;\">Source: <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/reallygoodemails.com\/emails\/10-ways-to-visualize-your-ideas\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Really Good Emails<\/span><\/a><\/em><\/p>\n<p><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/email.uplers.com\/\"><b>Uplers<\/b><\/a> used a background image to highlight a discount on their services, with a coupon image placed behind a coupon code.<\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/10\/2-1.png\" alt=\"\" \/><\/div>\n\n<p><em>Source: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/reallygoodemails.com\/emails\/a-100-off-say-whaaaaa\/live\">Really Good Emails<\/a><\/em><\/p>\n<p><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.figma.com\"><b>Figma<\/b><\/a> added a subtle repeating background pattern to the body of this email, introducing us to their new whiteboard product. The pattern they feature echoes the background found in the product.<\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/10\/3-1.png\" alt=\"\" \/><\/div>\n\n<p>View this email in <a rel=\"noopener\" href=\"https:\/\/litmus.com\/builder\/d93086b\" target=\"_blank\" rel=\"noopener\">Litmus Builder<\/a><\/p>\n<p><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.chipotle.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Chipotle<\/span><\/a><span style=\"font-weight: 400;\"> placed a jumbo background image behind this giant hero and body area, including product photography and a line pattern. Over the top of this image, they have an <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">animated GIF<\/span><\/a><span style=\"font-weight: 400;\"> with transparent background, and live text in the body area.<\/span><\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/10\/4-1.png\" alt=\"\" \/><\/div>\n\n<p><em>Source: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/reallygoodemails.com\/emails\/let-us-cater-your-friendsgiving-\" target=\"_blank\" rel=\"noopener\">Really Good Emails<\/a><\/em><\/p>\n<p>Animated GIFs can also be used as background images, like this example from <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/stock.adobe.com\/\" target=\"_blank\" rel=\"noopener\"><b>Adobe Stock<\/b><\/a>, promoting festive collections with hero content including live text and a <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/click-tap-and-touch-a-guide-to-cta-best-practices\" target=\"_blank\" rel=\"noopener\">CTA button<\/a> placed on top of the animated background.<\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/10\/5-1.png\" alt=\"\" \/><\/div>\n\n<p><em>Source: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/reallygoodemails.com\/emails\/spiced-up-seasons-greetings\" target=\"_blank\" rel=\"noopener\">Really Good Emails<\/a><\/em><\/p>\n<h2 id=\"design\">Design considerations<\/h2>\n<p>When thinking about implementing background imagery, there are some design considerations worth taking into account.<\/p>\n<h3>Contrast<\/h3>\n<p><span style=\"font-weight: 400;\">To ensure <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">all readers get the value of content overlaid on background imagery<\/span><\/a><span style=\"font-weight: 400;\">, it\u2019s important to be mindful of contrasts. Treat the image in much the same way as you would a flat color, and test the colors in your image against the colors of your content.<\/span><\/p>\n<p>If you design using <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.figma.com\/\" target=\"_blank\" rel=\"noopener\">Figma<\/a>, you can add plugins like <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.figma.com\/community\/plugin\/733343906244951586\/Color-Blind\" target=\"_blank\" rel=\"noopener\">Color Blind<\/a> and <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.figma.com\/community\/plugin\/748533339900865323\/Contrast\" target=\"_blank\" rel=\"noopener\">Contrast<\/a> to see whether you are meeting <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\" target=\"_blank\" rel=\"noopener\">Web Content Accessibility Guidelines<\/a> (WCAG). There are also a number of web apps, like <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener\">WebAim\u2019s Contrast Checker<\/a>, where you can test the colors in your designs.<\/p>\n<h3>Simplicity<\/h3>\n<p>Another way to ensure readability is to keep things simple. Busy backgrounds can make it hard to get the value of any live text you place on your image. So it\u2019s often helpful to consider your background image as an enhancement rather than a feature.<\/p>\n<h3>Solid color fallback<\/h3>\n<p><span style=\"font-weight: 400;\">As not all <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-client-market-share\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">email clients<\/span><\/a><span style=\"font-weight: 400;\"> will honor background imagery, design a solid color fallback. Subscribers using email clients that won\u2019t support your imagery can still have a great experience with a solid color. Be sure to choose a fallback color that matches your design and contrasts well with its foreground elements.<\/span><\/p>\n<h2 id=\"code\">How to code background images in email<\/h2>\n<p>Before I walk through the code, let\u2019s see which clients will render background CSS styling and which ones need the help of a VML fallback.<\/p>\n<p><strong>The good news:<\/strong><span style=\"font-weight: 400;\"> over the years, support for inline background CSS has improved, so background HTML attribute is no longer required as webmail clients now fully support this method.\u00a0<\/span><\/p>\n<p><strong>The bad news:<\/strong><span style=\"font-weight: 400;\"> Unfortunately, background images don\u2019t work well for Windows 10 and Windows 11 Mail. It won\u2019t render inline CSS or the deprecated HTML background attribute, and applying VML will cause rendering issues with an \u2018image can\u2019t be displayed\u2019 error message.<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-31907 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/windows-10-e1627305641850.jpg\" alt=\"Windows 10 Mail example of email background images\" width=\"1600\" height=\"508\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/windows-10-e1627305641850.jpg 1600w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/windows-10-e1627305641850-300x95.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/windows-10-e1627305641850-1024x325.jpg 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/windows-10-e1627305641850-768x244.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/windows-10-e1627305641850-1536x488.jpg 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/>\n<p><span style=\"font-weight: 400;\">But fear not! If you are concerned about the experience your Windows 10 and Windows 11 Mail subscribers are getting, you have a few options. <\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Option 1: Consider leaving out VML<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Leave out the VML and set a fallback background color to ensure you\u2019re giving your Microsoft Outlook Suite audience a great email reading experience, without the extra decoration. This is our preferred method at Litmus as VML <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/pulse\/email-accessibility-alert-vml-code-creates-errors-sarah-gallardo\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">can cause accessibility errors.<\/span><\/a><span style=\"font-weight: 400;\"> If you need the image to show up, try hiding the background version for your Outlook viewers and replacing it with a static image. Just make sure to include <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email\" target=\"_blank\" rel=\"noopener\">ALT text<\/a>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you absolutely need to use a background image, you can opt for workaround number two\u2026<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Option 2: <\/span><span style=\"font-weight: 400;\">Use absolute positioning in Outlook<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Since Outlook doesn\u2019t support background images very well, use absolute positioning to position your content over an image in Outlook. (Shoutout to <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/github.com\/matthieuSolente\/email-generators\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Matthieu Solente<\/span><\/a><span style=\"font-weight: 400;\"> for sharing this with us! He even created a <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/matthieusolente.github.io\/mso-faux-absolute-generator\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">mso faux absolute generator for Outlook<\/span><\/a><span style=\"font-weight: 400;\">). <\/span><strong>Note<\/strong><span style=\"font-weight: 400;\">: this only works if you\u2019ve got a set width on a table; it won\u2019t work if you try to stretch something across the whole email.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">One thing about this route, though, is that it is\u2026 finicky. But if you\u2019ve got a sizeable Windows 11 audience, the payoff could be worth it. Just remember to set a fallback to a traditional background image or static image and <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">test your emails<\/span><\/a><span style=\"font-weight: 400;\"> as you go.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s an example:<\/span><\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/10\/6-1.png\" alt=\"\" \/><\/div>\n\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;tr>\n                      &lt;td align=\"center\" valign=\"top\" style=\"background-image: url('https:\/\/campaigns.litmus.com\/_email\/2023\/March\/2023-03-LL_Save_the_Date\/2023_LL_dots_light.png');\">\n                           &lt;!--[if gte mso 9]>&lt;v:image  filled=\"t\" stroked=\"f\" alt=\"\" style=\"position:relative;top:0px; width: 600px; height:570px;mso-position-horizontal:center;\" src=\"https:\/\/campaigns.litmus.com\/_email\/2023\/March\/2023-03-LL_Save_the_Date\/2023_LL_dots_light.png\" \/>\n                    &lt;![endif]-->\n                           &lt;table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n                                &lt;tr>\n                                     &lt;td align=\"center\" valign=\"top\" style=\"padding: 30px;\">\n                                          &lt;a rel=\"noopener\" href=\"https:\/\/litmus.com\/\" style=\"text-decoration: none;\">&lt;!--[if (gte mso 9)|(IE)]>&lt;!-->&lt;img class=\"fadeimg\" src=\"https:\/\/via.placeholder.com\/600x300\" width=\"600\" height=\"300\" alt=\"\" style=\"width: 100%; max-width: 600px; height: auto;\" \/>&lt;!--&lt;![endif]-->\n                                           &lt;!--[if gte mso 9]>&lt;v:image src=\"https:\/\/via.placeholder.com\/600x300\" style=\"position:relative;mso-position-horizontal:center;width: 540px;height:270px;border:0;display:block;margin:-10px auto 0;\" alt=\"\" \/>\n                            &lt;![endif]-->\n                                          &lt;\/a>\n                                          &lt;!--[if gte mso 9]>&lt;v:rect fill=\"true\" stroke=\"false\" style=\"position: relative;top:270px;mso-position-horizontal:center;width: 540px; height:474px;\">\n                              &lt;v:fill opacity=\"0%\" color=\"#ffffff\"\/>&lt;center style=\"text-align:center\">\n                              &lt;![endif]-->\n                                              &lt;h2 style=\"margin: 30px 0 0; mso-margin-top-alt: 15px; \">&lt;a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/\">Secondary headline&lt;\/a>&lt;\/h2>\n                                               &lt;p style=\"text-align: left; margin: 30px 0 0; mso-margin-top-alt: 15px;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id elit ac metus interdum dictum. Praesent malesuada enim in egestas gravida. Etiam et molestie leo. Donec quis leo sit amet sapien pharetra mattis sed at nulla. Etiam nunc eros, imperdiet a gravida ut, ullamcorper eget augue.&lt;\/p>\n                                          &lt;!--[if mso]>&lt;\/center>&lt;\/v:rect>&lt;![endif]-->\n                                     &lt;\/td>\n                                &lt;\/tr>\n                               &lt;!--[if mso]>\n                                &lt;tr>\n                                 &lt;td aria-hidden=\"true\" height=\"500\" style=\"font-size: 0px; line-height: 500px;height:500px\">\n                                  &amp;nbsp;\n                                 &lt;\/td>\n                               &lt;\/tr>\n                               &lt;![endif]-->\n                           &lt;\/table>\n                      &lt;\/td>\n                 &lt;\/tr><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_9d33c0588e478e8d9633e8d3a8c5ced7\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>What does support look like on email clients?<\/p>\n<p><strong>Email client support for background images<\/strong><\/p>\n<div style=\"background: #f6f6f6; border: 1px solid #ddd; padding: 15px;\">\n<table style=\"border: 0; margin: 0;\" width=\"100%\">\n<tbody>\n<tr>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 0px; font-weight: bold; line-height: 20px; text-align: left;\">Email client<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 0; font-weight: bold; line-height: 20px;\">Using inline CSS<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 0; font-weight: bold; line-height: 20px;\">Using VML<\/p>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Apple Mail 14<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Office 365 (Mac)<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Office 365 (Windows)<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Outlook 2016 (macOS 10.12.6)<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Outlook 2013, 2016, 2019 (Windows 10)<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Windows 10 Mail<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Gmail App (Android 10)<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Gmail App (iOS 13.4.1)<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Outlook (Android 7.0)<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Outlook (iOS 12.0)<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Samsung Mail (Android 7.0)<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">iPad 11 Air (Gen 4 iOS 14.2)<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">iPhone 12 (iOS 14.2)<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">AOL Mail (Edge)<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Gmail (Chrome)<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Office 365<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Outlook.com<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Yahoo! Mail<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n<div id=\"post-cta-buttonblock_56294c6b26cd29d68c12efd4be1e5ade\" class=\"block-post-cta-button mt-5\">\n  <div class=\"container px-0\">\n    <div class=\"row\">\n      <div class=\"blog-post-cta-button-wrapper col-12 col-lg-10 mx-auto p-4 d-block d-lg-flex align-items-lg-center align-items-start\">\n\t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t \t\t\t  \t\t  \t\t  <div class=\"blog-post-cta-button-icon col-2 float-start mx-auto float-lg-start float-none background-white d-flex flex-column justify-content-center align-items-center text-center\">\n\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/06\/up-to-date-email-clients-icon.png\" alt=\"\" width=\"194\" height=\"194\"\/>\n\t\t\t\t\t  \t\t  <\/div><!--blog-post-cta-button-icon-->\n\t\t\t\t\t\t\t\t  \t\t  <div class=\"col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0\">\t\t\t  \t\t\t  <h2 class=\"h-sm\"><strong>Which email clients do your subscribers use?<\/strong><\/h2>\n\t\t\t   \n\t\t\t  \t\t\t\t\t<p>Take a look at your own email client market share with Litmus Email Analytics. See which email clients you need to optimize your background images for. (Hint: If Windows 10 Mail is low, don\u2019t sweat it.)<\/p>\n\t\t\t\t\t \n\t\t\t  \t\t  <\/div><!--col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0-->\t\t\t  \t\t  <div class=\"text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"btn btn-primary\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-analytics\/\">\n\t\t\t\t\t\tLearn more\t\t\t\t\t\t<\/a>\n\t\t\t  \t\t  <\/div><!--text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0-->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        <\/div><!--blog-post-cta-button-wrapper-->\n    <\/div><!--row-->\n  <\/div><!--container-->\n<\/div>\n\n\n\n\t<div id=\"simple-text-block-block_34a156b8ed22f12ea8d478f85e52a9f7\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>&nbsp;<\/p>\n<p>Now that we\u2019ve got that out of the way, let\u2019s talk code!<\/p>\n<p>There are a few different ways to approach background imagery in email (which is part of what makes it fun!). You can fill a small section or cover the body of your email, use a single image or a repeat pattern, and you can switch your background imagery depending on whether your reader is on desktop, mobile, Light Mode, <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers\" target=\"_blank\" rel=\"noopener\">Dark Mode<\/a>, or even when they hover or roll over your image.<\/p>\n<p>Each technique needs a different approach, so let\u2019s take a look at the best ways to code these.<\/p>\n<h3>Width-defined or fixed background image<\/h3>\n<img decoding=\"async\" class=\"alignnone wp-image-31910 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/fixed-background.png\" alt=\"fixed-width background example of email background images\" width=\"1122\" height=\"668\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/fixed-background.png 1122w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/fixed-background-300x179.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/fixed-background-1024x610.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/fixed-background-768x457.png 768w\" sizes=\"(max-width: 1122px) 100vw, 1122px\" \/>\n<p><span style=\"font-weight: 400;\">When applying background images, it\u2019s always best to add your code to the cell of the containing table. Applying to any other HTML element such as <code>&lt;table&gt;<\/code> or <code>&lt;body&gt;<\/code> is unlikely to get support from some email clients. Here\u2019s what this should look like:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;table class=\"container\" role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"600\">\n&lt;tr>\n    &lt;td style=\"background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;\">\n        &lt;!--add your content here-->\n    &lt;\/td>\n&lt;\/tr>\n&lt;\/table><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_11f602ca107c8dac676f24005161942a\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>Here, the image is made to fit the width and height of the cell by including background-size:cover in the inline CSS styles and then positioned to the center. Adding these styles allows you to use a 2x image\u2014meaning you\u2019ll see <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/understanding-retina-images-in-html-email\/\">crisp rendering on retina displays<\/a>\u2014and it will be resized to fit neatly within your container, even when the container resizes for rendering on different devices.<\/p>\n<p>However, this also means if your image is too small or not sized proportionately to the container, it may look pixelated or stretched. Especially if it\u2019s photography.<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n<div id=\"post-cta-buttonblock_689d0a1cb67032df2b45255244592432\" class=\"block-post-cta-button mt-5\">\n  <div class=\"container px-0\">\n    <div class=\"row\">\n      <div class=\"blog-post-cta-button-wrapper col-12 col-lg-10 mx-auto p-4 d-block d-lg-flex align-items-lg-center align-items-start\">\n\t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t \t\t\t  \t\t  \t\t  <div class=\"blog-post-cta-button-icon col-2 float-start mx-auto float-lg-start float-none background-white d-flex flex-column justify-content-center align-items-center text-center\">\n\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/09\/templates_previews_icon.svg\" alt=\"\" width=\"54\" height=\"42\"\/>\n\t\t\t\t\t  \t\t  <\/div><!--blog-post-cta-button-icon-->\n\t\t\t\t\t\t\t\t  \t\t  <div class=\"col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0\">\t\t\t  \t\t\t  <h2 class=\"h-sm\"><strong>Does your background image work?<\/strong><\/h2>\n\t\t\t   \n\t\t\t  \t\t\t\t\t<p>See how our code for background images work in your own email across the most popular email apps such as Gmail and Outlook.<\/p>\n\t\t\t\t\t \n\t\t\t  \t\t  <\/div><!--col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0-->\t\t\t  \t\t  <div class=\"text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"btn btn-primary\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\/\">\n\t\t\t\t\t\tLearn more\t\t\t\t\t\t<\/a>\n\t\t\t  \t\t  <\/div><!--text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0-->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        <\/div><!--blog-post-cta-button-wrapper-->\n    <\/div><!--row-->\n  <\/div><!--container-->\n<\/div>\n\n\n\n\t<div id=\"simple-text-block-block_cd3061e4c79db483fa5cbe9fc9beff72\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>&nbsp;<\/p>\n<p>Today, most email clients support inline CSS background styling, so you can add your background image and fallback color using the <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/background\">background shorthand CSS property<\/a>. In other words, simply apply these to the \u2018background\u2019 style. Unfortunately, further background styling doesn\u2019t work too well with shorthand when coding inline, so any positioning or sizing would need to be written as separate styles. For example, using <span style=\"background-color: #eeeeee; font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New; border: 1px solid #999999; padding: 5px;\">background-position: center; background-size: 80%;<\/span> instead of <span style=\"background-color: #eeeeee; font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New; border: 1px solid #999999; padding: 5px;\">background: center\/80%;<\/span>.<\/p>\n<h4>Making this work in Outlook with a VML fallback<\/h4>\n<p>Outlook and Office 365 for desktop also need a little help to display background images, as they too won\u2019t render CSS background styles. To get our background image to display in these email clients, we need to leverage a technique popularized by <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/backgrounds.cm\/\">Stig Morten Myre for Campaign Monitor<\/a>, and apply Microsoft\u2019s Vector Markup Language (VML).<\/p>\n<p>Taking the code we have already created, we place the required VML and a containing <code>&lt;div&gt;<\/code> inside our table cell:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;table class=\"container\" role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"600\">\n&lt;tr>\n    &lt;td style=\"background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;\">\n\u200b\u200b&lt;!--[if gte mso 9]>\n&lt;v:rect xmlns_v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" style=\"width:600px; background-color:#B5CFE3;\">\n           &lt;v:fill type=\"frame\" src=\"fixed-background.jpg\" \/>\n           &lt;v:textbox style=\"mso-fit-shape-to-text:true\" inset=\"0,0,0,0\">\n           &lt;![endif]-->\n           &lt;div>\n&lt;!--add your content here-->\n&lt;\/div>\n&lt;!--[if gte mso 9]>\n&lt;\/v:textbox>\n&lt;\/v:rect>\n&lt;![endif]-->\n \n    &lt;\/td>\n&lt;\/tr>\n&lt;\/table><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_d310fa1e283a7e5c9651e80787811882\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>For images that need to fill the container without repeating, we need to use \u2018frame\u2019 within the vml:fill tag. This way, you can use 2x imagery within this tag. Just ensure you set the width of your container using inline styling on the <code>v:rect<\/code> tag (in the example above, it\u2019s set to 600px).<\/p>\n<p>If you want padding on your container, something you might find is placing the VML within the container will make the padding collapse. The way we fix this is to wrap the VML around our container, so we need to nest our container within another table like so:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;table class=\"container\" role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"600\">\n&lt;tr>\n&lt;td>\n\u200b\u200b&lt;!--[if gte mso 9]>\n&lt;v:rect xmlns_v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" style=\"width:600px; background-color:#B5CFE3;\">\n&lt;v:fill type=\"frame\" src=\"fixed-background.jpg\" \/>\n&lt;v:textbox style=\"mso-fit-shape-to-text:true\" inset=\"0,0,0,0\">\n&lt;![endif]-->\n&lt;div>\n&lt;table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n    &lt;td style=\"background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;\">\n&lt;!--add your content here-->\n    &lt;\/td>\n&lt;\/tr>\n&lt;\/table>\n&lt;\/div>\n&lt;!--[if gte mso 9]>\n&lt;\/v:textbox>\n&lt;\/v:rect>\n&lt;![endif]-->\n&lt;\/td>\n&lt;\/tr>\n&lt;\/table><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_3f6f003504d3b76ff111a91722eea9ff\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h3>Repeating background image<\/h3>\n<p>You can also add a background that repeats within the container you place it. A great example is to repeat a pattern throughout the body of your email.<\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-31952 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/07\/repeating-email-background-image.png\" alt=\"example of repeating email background images\" width=\"551\" height=\"288\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/07\/repeating-email-background-image.png 551w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/07\/repeating-email-background-image-300x157.png 300w\" sizes=\"(max-width: 551px) 100vw, 551px\" \/>\n<p>If the image we place in our container cell is smaller than the container, it will automatically repeat both horizontally and vertically. To repeat in just one direction, style with \u2018background-repeat\u2019 CSS and add the value repeat-x to repeat horizontally or repeat-y to repeat vertically.<\/p>\n<p>To fill the whole container with a fully repeating pattern, the code is very simple:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n&lt;tr>\n    &lt;td style=\"background: url(repeat-background.png) #B5CFE3;\">\n        &lt;!--add your content here-->\n    &lt;\/td>\n&lt;\/tr>\n&lt;\/table><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_44f852505cfda4421b69375417fceb3d\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h4>Making this work in Outlook with a VML fallback<\/h4>\n<p>Again, if you would like to see your background render in Outlook clients, you can apply VML. The code is a little different this time, with the VML placed before the container:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;div>\n  &lt;!--[if gte mso 9]>\n  &lt;v:background xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"t\">\n    &lt;v:fill type=\"tile\" src=\"repeat-background.png\" color=\"#ffffff\"\/>\n  &lt;\/v:background>\n  &lt;![endif]-->\n  &lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width:100%;\">\n     &lt;tr>\n        &lt;td align=\"center\" style=\"background-image: url(repeat-background.png);\">\n       &lt;\/td>\n    &lt;\/tr>\n&lt;\/table>\n&lt;\/div><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_c7f7faf78a40fbe4e0bd5e7905056c6e\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">To make the background repeat, populate the v:fill tag with the type \u2018tile\u2019. No surprise, there are some rendering issues with Windows 10 Mail, and with repeating backgrounds, the rendering issues can be much more unsightly. So, leaving out the VML might be the safest approach if you have any Windows 10 Mail subscribers.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Advanced techniques<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Fixed and repeating background imagery offer a lot of opportunity to <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-design-best-practices\" target=\"_blank\" rel=\"noopener\">level up your email designs<\/a>, but there\u2019s more:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Contrast image swap<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Switching your background image is a great way to complement a light or Dark Mode design\u2014especially if you want to <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/dark-mode-vs-light-mode-email-design\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">honor subscriber preferences<\/span><\/a><span style=\"font-weight: 400;\">. And it\u2019s a fun and simple enhancement, too.<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-31913 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/contrast-modes.jpg\" alt=\"email background images with different contrast modes\" width=\"2224\" height=\"768\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/contrast-modes.jpg 2224w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/contrast-modes-300x104.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/contrast-modes-1024x354.jpg 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/contrast-modes-768x265.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/contrast-modes-1536x530.jpg 1536w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/contrast-modes-2048x707.jpg 2048w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/contrast-modes-1800x622.jpg 1800w\" sizes=\"(max-width: 2224px) 100vw, 2224px\" \/>\n<p>To implement this, you need to add some embedded CSS to <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers\/\">Dark Mode media queries<\/a>. This will make sure your Dark Mode background image is served within email clients that will support this type of media query:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.darkmode-switch {\n            background-image:url(background-dark.png) !important;\n            background-color:#111111 !important;\n        }<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_b1211b48c38826004fb4e17658e5e2a1\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>It\u2019s worth adding a dark fallback color. This will help with email clients that won\u2019t load images without the reader taking action and ensures your message can be read when your image hasn\u2019t been loaded.<\/p>\n<p>Now, in your HTML, apply your class to the cell containing your light mode background image. Simple!<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;table class=\"container\" role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"600\">\n&lt;tr>\n    &lt;td class= \"darkmode-switch\" style=\"background: url(background-light.png) #B5CFE3; background-size:cover; background-position:center;\">\n        &lt;!--add your content here-->\n    &lt;\/td>\n&lt;\/tr>\n&lt;\/table><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_07d47b78f195d8bd9b0b82ebbe1f4666\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>\ud83d\udca1 <strong>Take note<\/strong>: Something that is hard to design for, and even harder to code for, is email clients that invert the colors of your email in a Dark Mode environment, completely overlooking all of the hard work you put into writing Dark Mode media queries.<\/p>\n<p>You can play around with background images that have a level of transparency, and apply a high contrast background color to your container, such as white for light mode and black for Dark Mode. This will allow the <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/background-colors-html-email\" target=\"_blank\" rel=\"noopener\">email background color<\/a> to be inverted. This is illustrated in the next example:<\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-31916 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/bg-invert.jpg\" alt=\"email background image in different Dark Mode scenarios\" width=\"2403\" height=\"1870\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/bg-invert.jpg 2403w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/bg-invert-300x233.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/bg-invert-1024x797.jpg 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/bg-invert-768x598.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/bg-invert-1536x1195.jpg 1536w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/bg-invert-2048x1594.jpg 2048w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/bg-invert-1800x1401.jpg 1800w\" sizes=\"(max-width: 2403px) 100vw, 2403px\" \/>\n<p><span style=\"font-weight: 400;\">The above chevron background image has an opacity of 30% on the arrows and is fully transparent between them. This means that when offending email clients take control of my Dark Mode rendering, the content is readable.<\/span><\/p>\n<p>For more information on coding for Dark Mode and email client support, check out our <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/the-ultimate-guide-to-dark-mode-email\/\" target=\"_blank\" rel=\"noopener\">Ultimate Guide to Dark Mode Email<\/a>.<\/p>\n<h4>Interactive background<\/h4>\n<p>How about delighting subscribers with some <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/how-to-create-an-interactive-email\" target=\"_blank\" rel=\"noopener\">interactivity<\/a>? You can spread a little joy with a simple hover or rollover effect, changing the background of your container as the reader moves their cursor over your content.<\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-31915 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/bg-switch-rollover.gif\" alt=\"email background image switch on hover or rollover\" width=\"1250\" height=\"768\" \/>\n<p>You need a little embedded CSS to make this one work. Place this inside your <code>&lt;style&gt;<\/code> tag:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.background-rollover:hover{ \n        background-image: url(background-rollover-b.png) !important; \n        background-color:#020203 !important;\n}<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_ddca4057dcf8f3ec459ff51720865034\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>Now all you need to do is apply this class to your table cell, like so:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;table class=\"container\" role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"600\">\n&lt;tr>\n    &lt;td class=\"background-rollover\" style=\"background: url(background-rollover-a.png) #DBE8F0; background-size:cover; background-position:center;\">\n        &lt;!--add your content here-->\n    &lt;\/td>\n&lt;\/tr>\n&lt;\/table><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_3ceb21ec1a287fd806f1c773fed6eaf8\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h2>Level up your designs<\/h2>\n<p><span style=\"font-weight: 400;\">Using background images or <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/video-in-email\" target=\"_blank\" rel=\"noopener\">embed video in email<\/a> to enhance your email designs is a great way to push the envelope and get your emails to stand out in the crowd. It\u2019s also a great way to level up your emails in your <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/state-of-email-design-tools\" target=\"_blank\" rel=\"noopener\">email design tool<\/a> and make them more accessible. To help you put these techniques into practice, we have created a <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/builder\/63d0409\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">handy resource<\/span><\/a><span style=\"font-weight: 400;\"> where you can grab the code featured in this post.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We would love to see how you use background imagery in your emails! Share them with us at <\/span><a rel=\"noopener\" target=\"_blank\" href=\"mailto:hello@litmus.com\"><span style=\"font-weight: 400;\">hello@litmus.com<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><i><\/i><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n\n\t<div id=\"simple-text-block-block_54d3bae9aad7fcc8cff983ce3ce4d38c\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><i><span style=\"font-weight: 400;\"><br \/>\nOriginally published on May 24, 2019, by Jason Rodriguez, with a revision by Lily Worth on July 22, 2021. Last updated January 16, 2024.<\/span><\/i><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n<div id=\"post-cta-buttonblock_1b5588bda17f043e834a98f39f982df9\" class=\"block-post-cta-button mt-5\">\n  <div class=\"container px-0\">\n    <div class=\"row\">\n      <div class=\"blog-post-cta-button-wrapper col-12 col-lg-10 mx-auto p-4 d-block d-lg-flex align-items-lg-center align-items-start\">\n\t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t \t\t\t  \t\t  \t\t  <div class=\"blog-post-cta-button-icon col-2 float-start mx-auto float-lg-start float-none background-white d-flex flex-column justify-content-center align-items-center text-center\">\n\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/03\/order_199449604_logo.svg\" alt=\"\" width=\"107\" height=\"107\"\/>\n\t\t\t\t\t  \t\t  <\/div><!--blog-post-cta-button-icon-->\n\t\t\t\t\t\t\t\t  \t\t  <div class=\"col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0\">\t\t\t  \t\t\t  <h2 class=\"h-sm\"><strong>Ensure your background images work\u2014with Litmus<\/strong><\/h2>\n\t\t\t   \n\t\t\t  \t\t\t\t\t<p>Did it work? Preview your background images (and the rest of your email) in over 100 email clients, apps, and devices with Litmus. And say hello to on-brand, error-free emails.<\/p>\n\t\t\t\t\t \n\t\t\t  \t\t  <\/div><!--col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0-->\t\t\t  \t\t  <div class=\"text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"btn btn-primary\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/pricing\">\n\t\t\t\t\t\tBook a demo\t\t\t\t\t\t<\/a>\n\t\t\t  \t\t  <\/div><!--text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0-->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        <\/div><!--blog-post-cta-button-wrapper-->\n    <\/div><!--row-->\n  <\/div><!--container-->\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Get the HTML code and design tips you need to create effective background images in your email templates. It\u2019s easy to get started today!<\/p>\n","protected":false},"author":3,"featured_media":73964,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[238,478,10272,102,468],"blog_category":[10300],"class_list":["post-3431","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-alt-text","tag-design","tag-developer","tag-html","tag-images","blog_category-email-building"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Tutorial: How to Add Email Background Images (+ Code) - Litmus<\/title>\n<meta name=\"description\" content=\"Get the HTML code and design tips you need to create effective background images in your email templates. It\u2019s easy to get started today!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add an Email Background Image Easily (+ the Code to Do It!)\" \/>\n<meta property=\"og:description\" content=\"Get the HTML code and design tips you need to create effective background images in your email templates. It\u2019s easy to get started today!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-15T18:03:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-23T21:22:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/07\/Background-Images-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1384\" \/>\n\t<meta property=\"og:image:height\" content=\"726\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Tutorial: How to Add Email Background Images (+ Code) - Litmus","description":"Get the HTML code and design tips you need to create effective background images in your email templates. It\u2019s easy to get started today!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email","og_locale":"en_US","og_type":"article","og_title":"How to Add an Email Background Image Easily (+ the Code to Do It!)","og_description":"Get the HTML code and design tips you need to create effective background images in your email templates. It\u2019s easy to get started today!","og_url":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2024-01-15T18:03:00+00:00","article_modified_time":"2025-12-23T21:22:34+00:00","og_image":[{"width":1384,"height":726,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/07\/Background-Images-1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email"},"author":{"name":"","@id":""},"headline":"How to Add an Email Background Image Easily (+ the Code to Do It!)","datePublished":"2024-01-15T18:03:00+00:00","dateModified":"2025-12-23T21:22:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email"},"wordCount":13,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/07\/Background-Images-1.png","keywords":["Alt Text","Design","Developer","HTML","Images"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email","url":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email","name":"Tutorial: How to Add Email Background Images (+ Code) - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/07\/Background-Images-1.png","datePublished":"2024-01-15T18:03:00+00:00","dateModified":"2025-12-23T21:22:34+00:00","description":"Get the HTML code and design tips you need to create effective background images in your email templates. It\u2019s easy to get started today!","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/07\/Background-Images-1.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/07\/Background-Images-1.png","width":1384,"height":726},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"How to Add an Email Background Image Easily (+ the Code to Do It!)"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=3431"}],"version-history":[{"count":20,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3431\/revisions"}],"predecessor-version":[{"id":121788,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3431\/revisions\/121788"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/73964"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=3431"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=3431"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=3431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}