Menu
I'm looking to recreate an effect similiar to the popular science app. Basically have one big background image and then have HTML/CSS layer on top of that. When the user scrolls the content, then background-position of the image should remain in place, and not scroll.
Obviously in a 'regular' browser I would use background-attachment:fixed, but this doesn't seem to work on the ipad. I know position:fixed doesn't work as you might expect according to safari spec - but is there any way of achieving this?
818
The background-attachment CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.
background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even supported by the most widely used mobile browsers. You can ditch this idea completely and let the background scroll on small screens using media queries.
Open Safari on iPhone running iOS 15 or later and tap Edit from the start page. Turn on Background Image. Apple includes preset background images. Tap to use one.
To keep your background fixed, scroll, or local in CSS, we have to use the background-attachment property. Background-attachment: This property is used in CSS to set a background image as fixed or scroll. The default value of this property is scroll.
You can use this code to make a fixed background layer to hack this problem.
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: 100%;
background-image: url('xx.jpg');
background-attachment: fixed;
}
And put <div id="background_wrap"></div> into <body></body>
<body>
<div id="background_wrap"></div>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
