发表新帖
发表新帖

CSS background-position not working in Mobile Safari (iPhone/iPad)

后端 未结
关注
5 1631
面向向阳花
面向向阳花 2020-12-06 00:43

I have an issue with background-position in mobile safari. It works fine on other desktop browsers, but not on iPhone or iPad.

body {
 background-color: #000
相关标签:
5条回答
  • Happy的楠姐
    2020-12-06 01:05

    Create a wrapper ID to place in the body, then include the following CSS:

    #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 ensure that none of your content goes within the div otherwise the whole page will be fixed with no scrolling.

    0 讨论(0)
  • 無奈伤痛
    2020-12-06 01:09

    I have this problem and I'm addressing it by getting rid of my fixed footer using a separate style as mentioned here: How to target CSS for iPad but exclude Safari 4 desktop using a media query?

    0 讨论(0)
  • 慢半拍i
    2020-12-06 01:10

    The iPhone/Webkit browser cannot center align background images when placed in the body tag. The only way around this is to remove the background image from your body tag and use an additional DIV as a wrapper.

    #wrapper {
 background-color: #000000;
 background-image: url('images/background_top.png');
 background-repeat: no-repeat;
 background-position: center top;
 overflow: auto;
}


<html lang="en">
 <head>
  <title>Title</title>
  <link rel="Stylesheet" type="text/css" href="styles.css" />
 </head>
 <body>
  <div id="wrapper">
    <div id="header"></div>
    <div id="main-content"></div>
    <div id="footer"></div>
  </div>
 </body>
</html>
    0 讨论(0)
  • 隐瞒了意图╮
    2020-12-06 01:17

    Apparently, when you "scroll" on an iPhone / iPad, you're not scrolling the page in the same way as you do in a desktop browser. What you're doing is more like moving the whole page within a viewport. (I'm sure someone will correct me if I'm using the wrong terminology here.)

    This means that background-position: fixed is still "supported" but has no real effect, since the whole page is moving within the viewport rather than the page content scrolling within the page.

    0 讨论(0)
  • [愿得一人]
    2020-12-06 01:20

    It'll work with

    background-position-x: 50%;
background-position-y: 0%;

    and still add

    background-position: center top;

    for other browsers.

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