CSS BG support in Android

We came across this issue whereby CSS background images would display for a split second, then disappear altogether. It was happening in the native client on Android 2.3 (Gingerbread).

{ Here’s how it looks on the Galaxy Note - 1st email uses CSS bg images 2nd is the workaround }

 

We tried it on three of our Gingerbread devices - S2, Galaxy Note and Ace - and the same thing happened. So we did more testing and confirmed that CSS background images are not supported on Android Mail 2.3. Though background images are supported if defined in the HTML.

Unfortunately GB accounts for 60% of Android’ marketshare, so it’s not something you can write off. Though CSS bg images are supported in later versions like Ice Creme Sandwich.

 

Swapping content

This is important as you often use background images to swap content in responsive email designs. It’s how we first came across the problem ourselves, trying to adjust the header on this template a few months back.

I’d forgotten about it until I received this responsive email from Pinterest (not one of mine, though slick design).

CSS background images in Android

 

They’ve run into the same issue we were having, their hero image displays for a second then disappears. It’s an easy one to miss as the images are drawn briefly, so when you run it through a static preview tool they’re visible.

CSS background images in Android

 

Workaround

There are other ways to hide mobile content from desktop users. One of the workarounds we’ve been using is “cell collapse”. You can view a demo here and view source. It will look blank until you resize your browser down, then an image will appear (not in early IE).

There is an empty table cell with a   (Non Breaking Space) in it which allows the cell to draw at whichever dimensions we specify. You may wish to use a transparent Gif set to display:block and set line-height etc. for code conformity and maximum support The cell contains a background image, which is defined as a cell property not via CSS. So if via CSS we define its width and height as zero and it’s display property as none, it will not be drawn. However if we set the width and height to match the background image at a certain breakpoint, the image becomes visible.

Possible fix

Ideally you just want to use CSS bg images rather than a hack. Graeme thinks there could be a fix - it is weird how it draws it at all - we just haven’t had time to chase it down. If you figure it out let us know, but for now if you’re deploying responsive emails I just wanted to give you a heads up.

 

4 Responses to “CSS BG support in Android”

  • John S.
    September 18th, 2012 09:05

    If you add the bg image to the div as an inline style (in addition to the bg image in the embedded CSS), it will resolve this.

  • Anna Yeaman
    September 18th, 2012 11:26

    Cheers John, I think we tried that and it didn’t work. I just re-tested with this http://tinyurl.com/98gtao5 and it disappeared again in GB. btw if you change the no.9 in the url to1-8 you can see some of our other tests (no. 8 being the workaround). If you’ve some code you’d like me to test leave a link and I’ll give it a go.

  • John S.
    September 18th, 2012 12:20

    I can’t send any samples to you due to NDA’s with where I work. However, we have tested this in house extensively and found it to work.

    However, I have been using divs to hold the replacement image. I would also put an absolute path to the image in both the inline and embedded css and try that.

    I’d be curious to see if those things make a difference!

    good luck!

    -j

  • Anna Yeaman
    September 18th, 2012 12:42

    We’ve tested with absolute paths so it may be the div thing…we’ll have another look into it. Cheers!