The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

Background Animations - removing duplicate image in Gmail

Abby Wentzel
posted 2014-09-02 18:21:52

Hey all,

Trying something new! Decided to add a CSS3 fade in/out animation to my full width background. So far, it looks and works great. It's even responsive! However, from what I can see in preliminary testing, Gmail is the only ESP where the positioning of the second background is not playing nicely. Instead of overlapping the primary table, it's stacking underneath of it.
Any idea how I can either re-position the second background, or hide it specifically for Gmail? It's the <div id="back"> after the container table.

If it's specifically for gmail, the only thing I can think of right now, is to inline your CSS for the div with id back, into hiding that background from Gmail. Then popping what you've got inline into the CSS with some !important's to over-rule the inline styles. Have you tried that?

You mean take the current inline styles out, and embed them in the <style> tags? I haven't yet, actually. Been testing using inline only so far.

However, I noticed that Yahoo might also give me the same problem, if the test preview is to be believed. After playing around with the code some more, I took out the "min-width" on the id="back" and moved the <div> so that it was held open by the <table> and added "font-size:1px;line-height:1px;mso-line-height-rule:exactly;". The result was that it left just a hairline of color at the bottom of the background. If the embedded styles removes the second image from Gmail, then I might have to live with this fix for Yahoo and call it good.

My other option is to just leave the CSS in a media query specific for iOS, since that appears to be the one common device that supports CSS3.

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Your free Community account includes access to the Litmus Community, as well as limited access to Litmus Builder. Check out the entire Litmus Email Creative Platform when you sign up for a free 7-day trial.