Create a Discussion

Cover Scroll in Email for Mobile

Alex Barnes posted 2015-07-13 09:23:45

Morning guys,

Anyone know if a process similar to this: http://jsfiddle.net/WsXP6/132/ can be implemented into mobile optomised email?

Thanks and have a good day.

Courtney Fantinato replied 2015-07-13 23:29:14

Potentially for iOS Mail would be my guess... why not try it and let us know what you find out? :)

Reply to Courtney Fantinato

Mark Robbins replied 2015-07-14 10:47:55

Here's a good example of a similar effect in an email (the VW camper at the bottom).
https://litmus.com/scope/eie278jqk2pg

Unfortunately background-attachment: fixed; doesn't work everywhere, off the top of my head iOS, Outlook, Yahoo don't support it. But it'll just fallback to the default background-attachment: scroll;

For iOS you could also fake it using position:fixed; if you really wanted.

Reply to Mark Robbins

Alex Barnes replied 2015-07-15 16:03:09

Cheers Mark,

I coded this up, works fine in browser but as you correctly stated IOS doesn't like background-attachment:fixed, any idea how I could achieve the same result using position:fixed?

I commented above and below the area to make it easier to locate.
https://jsfiddle.net/dcc88q09/

Thanks for your help

Mark Robbins replied 2015-07-15 16:47:50

To do this with position:fixed; you need to remove the background and use a :after pseudo element in it's place. Set the background on this, fix the position and move it behind the rest of the content with z-index:-1;

Here's the CSS to add.

.header{
    background:none !important;
}
.header:after{
  content:'';
  height:729px;
  width:100%;
  background-image: url('http://i8.cmail1.com/ei/t/76/05A/4BF/210717/csimport/summer-beats_7.jpg');
  position:fixed;
  top:0;
  z-index:-1;
}

Then to get that working in iOS only, try wrapping it in this media query

@media screen and (max-device-width: 320px) and (width: 320px) and (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-device-height: 320px) and (height: 320px) and (device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), screen and (device-width: 320px) and (width: 375px) and (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2), screen and (device-height: 320px) and (height: 375px) and (device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), screen and (device-width: 320px) and (width: 414px) and (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2), screen and (device-height: 320px) and (height: 414px) and (device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), screen and (device-width : 768px) and (device-height : 1024px) and (-webkit-min-device-pixel-ratio: 1), screen and (device-height : 1024px) and (device-width : 768px) and (-webkit-min-device-pixel-ratio: 1){   

/* iOS Code here */
}

Not checked that media query, just joined together ones I've used for iPhones and iPads before, it should work... I think...

Cheers

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

Cover Scroll in Email for Mobile

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password