发表新帖
发表新帖

Using background-attachment:fixed in safari on the ipad

前端 未结
关注
7 478
误落风尘
误落风尘 2020-11-30 05:51

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 sc

相关标签:
7条回答
  • 小蘑菇
    2020-11-30 06:33

    I believe you can place the background image in a div and set the z-index to appear behind other content. Afterwards you can use javascript to fix the position of the div which contains the background image.

    0 讨论(0)
  • 长发绾君心
    2020-11-30 06:36

    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>
    0 讨论(0)
  • 北荒
    2020-11-30 06:44

    I'm not that profi one, but I've solved this problem usin' jquery. It's quite simple) Here is the code:

    	jQuery(window).scroll(function(){
		var fromtop = jQuery(window).scrollTop();
		jQuery(" your element ").css({"background-position-y": fromtop+"px"});
	});

    0 讨论(0)
  • 北荒
    2020-11-30 06:48

    next solution in Css:

    body {
  background-image: url( ../images/fundobola.jpg );
  background-position: top center;background-repeat:no-repeat;
  background-size: 1900px 1104px;
  overflow: -moz-scrollbars-vertical;
  overflow-y: scroll;
}

    --- not use---- (cause: scroll disable )

    position: fixed

    Resolved in Ipad and iPhone

    0 讨论(0)
  • 面向向阳花
    2020-11-30 06:49

    Mobile safari scales your whole site down to it's viewport size, including the background image. To achieve the correct effect, use the -webkit-background-size CSS property to declare your background size:

    -webkit-background-size: 2650px 1440px;

    (hat tip to commenter Mac)

    0 讨论(0)
  • 眼角桃花
    2020-11-30 06:50

    Expanding on Anlai's answer above, I found that solution was repeating my image as I was scrolling rather than keeping it fixed. If anyone else had this problem my CSS for the background_wrap ID is as follows:

    #background_wrap {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-image: url('../images/compressed/background-mobile.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
}

    Just changed the background size and background attachment to make the image static.

    0 讨论(0)
 看不清?
提交回复
热议问题