Samsung is one of the most popular mobile device brands out there today, so it’s no surprise that we should support it when developing emails. It has its own native email app that comes pre-installed.

This year I was able to get my hands on a Samsung device to test on for the first time. One technique I use with emails is implementing mobile-optimized versions of images — particularly the “hero” image — in order to make them better for mobile devices, rather than just having the desktop version resize down. This involves hiding the inline desktop image and displaying the mobile version as a background image within a media query.

When I got to testing emails on the Samsung device, I noticed something both shocking and odd: my mobile-optimized background images were not appearing. Oops! And what was odd, was that I could see the background image for a brief second, like a flash, when I turned image display on but then it would disappear and not come back.

Get Background Images to Appear

So, it seemed that background images were supported — based on that quick flash that I saw of it — but there was some reason that it would disappear. I started looking at the code, and remembered that there’s different ways you can implement the URL of a background image: with no quotes, single quotes, or double quotes.

I tested all of these options and determined that you need to use single quotes around your background image URLs or they will not appear!

background-image: url('.../background.jpg');

A strange bug, but thankfully a simple fix!