Background-attachment fixed

HTML & CSS
1

Hello guys. I have problem with background-attachment:fixed. It works perfect on desktop but on mobile it is not working. I looked at caniuse.com it says mobile chrome supports it. But actually it is not supporting it.

P.s. I want to do parallax background effect

2

Without seeing your code, I doubt you’ll get any helpful replies @heybetov1998

3

Here is my code https://codepen.io/heybetov1998/pen/mxJBbP

4

Are you on iOS?

5

Yes. I also tried it on android. It is also erroring

6

It’s a known and long standing problem with background-attachment:fixed when used in conjunction with background-size:cover. They just aren’t compatible on mobile.

If you only have one fixed background then you can use position:fixed to place the element and then you don’t need background-attachment:fixed. This works well where you have an image on the body and then you can place it using body:after instead as in this example.

However if you want multiple images then this approach cannot be taken. The only suggestion I have is that you remove the background-size:cover for small screen (using media queries) and try to use images that don’t need ‘cover’.

Apart from possibly scripting the image to be fixed I don’t believe there is a solution as this question has been asked many times in the forum.

Are you going to be doing more fixed background images than shown in your codepen?

I’m guessing you will have multiple backgrounds but if the codepen is basically the full version then you could fake those three panels by leaving them transparent and just putting gray borders around the three columns.

e.g. (very roughly)

body{
  padding:200px 0 0;
}
body:before{
  content:"";
  position:fixed;
  z-index:-1;
  left:0;
  top:0;
  height:300px;
  width:100%;
  background:url('https://www.w3schools.com/w3css/img_fjords.jpg') center center no-repeat;
  background-size:cover;
}
#two{
  background-color:transparent;
  border:15px solid gray;
  border-bottom:50px solid gray;
  overflow:hidden;
}
.column{
  width:calc((100% / 3) - 10px);
  height:200px;
  float:left;
  border:5px solid gray;
  height:400px;
}

Of course we shouldn’t be using fixed heights if you are having text content in those panels etc.

1 Like
7

I use only one image. Thank you for your reply :slight_smile: It is very helpful information

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.