Fixed background in android and apple devices

Question

So here's my problem. I set a background image to a page using the following code:

.page-content{
    background-image: url("../../../../assets/pages/media/bg/3.jpg");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
    background-size:cover;

}

Seems to work fine. Then I added a little more for the mobile version

@media(max-width:991px){.page-content{
    background-attachment: scroll;
    }
}

I have tried to set background-size as cover, initial and even tried playing with the percentages. The problem is that on a mobile device, the background doesn't stay on the screen. When I scroll down, it goes up with the rest of the content.

Any help will be greatly appreciated.

so do you want the attachment to be fixed in mobile devices or scrolling? — Awsme Sandy, Oct 06 '17 at 05:41
Please let us know what you want it to be fixed or normal. Fixed css property doesn't work well on Ipad and mobile devices. — Anmol Sandal, Oct 06 '17 at 05:41

score 1 · Answer 1 · answered Dec 29 '17 at 10:30

I believe most, if not all phones do not support fixed background images. What you have to do is put the image in a separate div with a fixed position. The following code is provided by @vincent - background: fixed no repeat not working on mobile It is for the body element but I'm sure you can tweak it to fit your need.

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: -10;
  background: url(photos/2452.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Fixed background in android and apple devices

1 Answers1