1



I have a background image that stays in positions when scrolling down the page. See JSFiddle here: JS Fiddle
Code

body {
  font-family: 'Open Sans', sans-serif;
  background-image: url("http://vrexpert.virtualrealities.netdna-cdn.com/wp-content/uploads/2015/12/Google5.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  background-attachment: fixed;
  overflow-x: hidden !important;
  }


However
This does not get applied when using a mobile device.. (I'm using an iPad for example). The Image does not scroll along with the page..

How do I get the same result on mobile devices as it does on my desktop?

Nick Prozee
  • 2,823
  • 4
  • 22
  • 49

2 Answers2

2

Try the following: (Adapted from background: fixed no repeat not working on mobile)

body:before {
  font-family: 'Open Sans', sans-serif;
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url("http://vrexpert.virtualrealities.netdna-cdn.com/wp-content/uploads/2015/12/Google5.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
Community
  • 1
  • 1
Sworrub Wehttam
  • 588
  • 4
  • 14
0

The reason is here:

background-attachment: fixed;

It won't scroll with this setting. Just use scroll instead

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • I believe he *wants* it to be fixed, so that the contents scroll and not the background. He has already achieved the desired effect but it doesn't transfer to mobile. `"I have a background image that stays in positions when scrolling down the page..."` `"However this does not get applied when using a mobile device"` – Sworrub Wehttam Dec 14 '15 at 16:09
  • well, but he also writes: `The Image does not scroll along with the page` , so the page is scrolling, but not the background, which he doesn't like... – Johannes Dec 14 '15 at 16:16
  • There's also the fact he explicitly declared `background-attachment: fixed;`, I think this shows the intent. I think `"The Image does not scroll along with the page"` was a bit of a typo... but anyway let's see what the man himself says :) – Sworrub Wehttam Dec 14 '15 at 16:22