CODEWITHSUNDEEP
csshtmltwitter-bootstrapbackground
Nick Prozee
Nick Prozee

Reputation: 2913

CSS Background image not scrolling on mobile devices



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?

Upvotes: 1

Views: 3948

Answers (2)

Johannes
Johannes

Reputation: 67778

The reason is here:

background-attachment: fixed;

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

Upvotes: 0

Sworrub Wehttam
Sworrub Wehttam

Reputation: 598

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;
}

Upvotes: 2

Related Questions