background-attachment: fixed on mobile

问题

I'm trying to set a background image for an spn web app and I need the background to be fixed (that it won't be scrolled with the rest of the page).

this is the body css:

body {
  background-color: rgb(51, 102, 102);
  background-image: url('../images/background.png');
  background-attachment: fixed;
  background-position: center;
  color: #eee;
}

Safari in IOS and Chrome on Android repeat the background instead of fixing it at one point.

I've seen on the internet it's been disabled on mobile but is there a solution?

回答1:

background-repeat: no-repeat;
background-position: center center;

回答2:

There are other options to doing this but this is the only one that actually worked for me; and i tried just about all of them.

You set the div just below the initial tag. Then apply the image to the html within the div. Give the div and id attribute as well (#background_wrap in this case). ...I tried this without applying the actual image link within the html and it never worked properly because you still have to use "background-image:" attribute when applying the image to the background within css. The trick to getting this to work on the mobile device is not using any background image settings. These values were specific for my project but it worked perfectly for my fixed background image to remain centered and responsive for mobile as well as larger computer viewports. Might have to tweak the values a bit for your specific project, but its worth a try! I hope this helps.

<body>
     <div id="background_wrap"><img src="~/images/yourimage.png"/></div>
</body>

Then apply these settings in the CSS.

#background_wrap {
margin-left: auto;
margin-right: auto;   
}
    #background_wrap img {
        z-index: -1;
        position: fixed;
        padding-top: 4.7em;
        padding-left: 10%; 
        width: 90%;
     }

来源：https://stackoverflow.com/questions/41190405/background-attachment-fixed-on-mobile

标签

android

ios

css

fixed

background-attachment