Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Background Images on Android 5.1.0 Issue

gbingham1

Newbie
Total Posts:  5
Posted: 13 June 2016 06:15 AM

Hello Everyone!

I’m trying to create a campaign that uses 4 separate background images. I feel that I’ve got the code to a good place, where the background images display on even some of the more problematic platforms like Gmail and Outlook. However, I’m having rendering issues, particularly with Android 5.1.0. In general, I know there’s spotty support when it comes to background image support across all the platforms, but I’d like to see if anyone has come up with a good solution (particularly for Android 5).

As you can see on the attached image, Android 5.1.0 will just show the fallback background color.

Currently, I’ve included a background attribute linking to the image in a table tag, as well as an inline css style that uses the background:url property. Code snippet here for reference: https://jsfiddle.net/9m8sbtza/. I’ve even tried to incorporate Campaign Monitor’s Bulletproof method (https://backgrounds.cm/), but that didn’t work.

Has anyone else come across this problem, and know of any good solutions? Any insight would be much appreciated. Thanks!

Image Attachments
background-img-android5.png

 

Alex Ilhan

Avatar
Administrator
Total Posts:  210
Posted: 13 June 2016 09:36 PM
[ # 1 ]

Hey stephen48066,

Welcome to the Email on Acid forums!

Could you please post your full code as an attached .html file? I know it’s a bit cumbersome, but it enables me to bug fix the code in it’s entirely. All too often in email it can be something outside of the “problem” area causing issues.

Cheers!
Alex


 

gbingham1

Newbie
Total Posts:  5
Posted: 14 June 2016 04:14 AM
[ # 2 ]
Alex Ilhan - 13 June 2016 09:36 PM

Hey stephen48066,

Welcome to the Email on Acid forums!

Could you please post your full code as an attached .html file? I know it’s a bit cumbersome, but it enables me to bug fix the code in it’s entirely. All too often in email it can be something outside of the “problem” area causing issues.

Cheers!
Alex

Hi Alex,

Thanks for the reply! Sure thing! Attached is an .html file of the full code. It’s still a bit of a work in progress. Let me know if you have any questions, or need anything else!

File Attachments
kinetic-email-emailonacid.html  (File Size: 49KB - Downloads: 237)

 

Alex Ilhan

Avatar
Administrator
Total Posts:  210
Posted: 14 June 2016 10:30 PM
[ # 3 ]

Hi Stephen,

Thanks for the code sample, I didn’t realise you were working on a kinetic email! I’ll certainly have a look for you, but I may also have one of my colleagues, Justin, look at this for you. He’s pretty much an expert in kinetic email.

Cheers
Alex


 

gbingham1

Newbie
Total Posts:  5
Posted: 15 June 2016 02:47 AM
[ # 4 ]
Alex Ilhan - 14 June 2016 10:30 PM

Hi Stephen,

Thanks for the code sample, I didn’t realise you were working on a kinetic email! I’ll certainly have a look for you, but I may also have one of my colleagues, Justin, look at this for you. He’s pretty much an expert in kinetic email.

Cheers
Alex

Yeah, I probably should’ve mentioned that, too, since it adds another layer of complexity. That sounds great.  Please do keep me posted. Many thanks, Alex!


 

Justin Khoo

Avatar
Administrator
Total Posts:  4
Posted: 20 June 2016 06:29 AM
[ # 5 ]

Hi Stephen!

Sorry for the late reply. The unfortunate thing is that this client doesn’t support background images. It does not support background attributes (td background=”...”) or CSS backgrounds (style=“background-image:url()”).

—Justin


 

gbingham1

Newbie
Total Posts:  5
Posted: 21 June 2016 10:37 AM
[ # 6 ]
Justin Khoo - 20 June 2016 06:29 AM

Hi Stephen!

Sorry for the late reply. The unfortunate thing is that this client doesn’t support background images. It does not support background attributes (td background=”...”) or CSS backgrounds (style=“background-image:url()”).

—Justin

Thanks for looking into it, and for the reply, Justin! That’s a bummer. When it comes to overlaying text over an image, what do you think is the best practice?

I was also thinking of using an <img > tag with an image that incorporates the copy into it (ie.adding the text on image in image editor instead of html text), as a workaround.

Have you found a method that works best particularly for kinetic emails (using a background image with overlay text vs. <img > tag with image file incorporating copy)?

Sorry for the additional questions! Any insight would be appreciated.


 

Justin Khoo

Avatar
Administrator
Total Posts:  4
Posted: 21 June 2016 12:04 PM
[ # 7 ]

Hi Stephen,

It appears that using text within image would be your best bet here. In this case since Android 5.1 doesn’t support kinetic the decision would not wouldn’t matter whether its a kinetic or non kinetic design.

—Justin


 

gbingham1

Newbie
Total Posts:  5
Posted: 22 June 2016 02:59 AM
[ # 8 ]
Justin Khoo - 21 June 2016 12:04 PM

Hi Stephen,

It appears that using text within image would be your best bet here. In this case since Android 5.1 doesn’t support kinetic the decision would not wouldn’t matter whether its a kinetic or non kinetic design.

—Justin

Thanks for the input, Justin. Big fan of the freshinbox, by the way. smile


 

Justin Khoo

Avatar
Administrator
Total Posts:  4
Posted: 22 June 2016 12:50 PM
[ # 9 ]

Thank you Stephen! smile