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

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