css - Using background-attachment:fixed in safari on the ipad

Question

Welcome To Ask or Share your Answers For Others

css - Using background-attachment:fixed in safari on the ipad

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

css - Using background-attachment:fixed in safari on the ipad

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-16T23:59:31+0000

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>

Categories

css - Using background-attachment:fixed in safari on the ipad

css - Using background-attachment:fixed in safari on the ipad

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags