Question

嗨我的页面上有几个div，它们有背景图像，我想扩展以覆盖整个div，而div又可以扩展以填充视口的宽度。

显然background-size: cover在iOS设备上出现意外行为。我已经看到了一些如何修复它的例子，但我不能让它们在我的情况下工作。理想情况下，我不想在HTML中添加额外的<img>标记，但如果这是唯一的方法，那么我会。

这是我的代码：

.section {
  margin: 0 auto;
  position: relative;
  padding: 0 0 320px 0;
  width: 100%;
}

#section1 {
  background: url(...) 50% 0 no-repeat fixed;
  background-size: cover;
}

#section2 {
  background: url(...) 50% 0 no-repeat fixed;
  background-size: cover;
}

#section3 {
  background: url(...) 50% 0 no-repeat fixed;
  background-size: cover;
}

<body>
  <div id="section1" class="section">
    ...
  </div>
  <div id="section2" class="section">
    ...
  </div>
  <div id="section3" class="section">
    ...
  </div>
</body>

问题是，如何考虑浏览器的可变宽度和div中内容的可变高度，如何让背景图像完全覆盖div部分？

Answer 1

我最近遇到了类似的问题，并意识到这不是background-size:cover而是background-attachment:fixed。

我通过使用iPhone的媒体查询并将background-attachment属性设置为scroll来解决了这个问题。

对于我的情况：

.cover {
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;

    @media (max-width: @iphone-screen) {
        background-attachment: scroll;
    }
}

编辑：代码块在LESS中，并为@iphone-screen假定一个预定义的变量。感谢您注意@stephband。

Answer 2

我在最近构建的很多移动视图中遇到过这个问题。

我的解决方案仍然是一个纯粹的CSS后备

http://css-tricks.com/perfect-full-page-background-image/作为三个很好的方法，后两个是CSS3的封面不起作用的后退。

<强> HTML

<img src="images/bg.jpg" id="bg" alt="">

<强> CSS

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspect ratio */
  min-width: 100%;
  min-height: 100%;
}

Answer 3

也发布在这里："background-size: cover" does not cover mobile screen

适用于Android 4.1.2和iOS 6.1.3（iPhone 4）以及适用于桌面的交换机。为响应式网站撰写。

以防万一，在您的HTML头中，这样的事情：

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

HTML：

<div class="html-mobile-background"></div>

CSS：

html {
    /* Whatever you want */
}
.html-mobile-background {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 125%; /* To compensate for mobile browser address bar space */
    background: url(/images/bg.jpg) no-repeat; 
    background-size: 100% 100%;
}

@media (min-width: 600px) {
    html {
        background: url(/images/bg.jpg) no-repeat center center fixed; 
        background-size: cover;
    }
    .html-mobile-background {
        display: none;
    }
}

Answer 4

网上有答案试图解决这个问题，但是这些问题对我来说都不正确。目标：在body上放置背景图片，让background-size: cover;移动设备，无需媒体查询，overflows或hacky z-index: -1; position: absolute;叠加。

以下是我为解决这个问题所做的工作。即使键盘抽屉处于活动状态，它也适用于Android上的Chrome。如果有人想测试iPhone会很酷：

body {
    background: #FFFFFF url('../image/something.jpg') no-repeat fixed top center;
    background-size: cover;
    -webkit-background-size: cover; /* safari may need this */
}

这是魔术。将html视为包装，其强制比例相对于实际视口具有强制比例。您知道经典的响应标记<meta name="viewport" content="width=device-width, initial-scale=1">吗？这就是使用vh的原因。此外，表面看起来似乎body应该得到这些规则，它看起来可能......直到键盘打开时的高度变化。

html {
    height: 100vh; /* set viewport constraint */
    min-height: 100%; /* enforce height */
}

Answer 5

对于Safari版本＆lt; 5.1 ，css3属性background-size不起作用。在这种情况下，您需要webkit。

因此，您需要使用-webkit-background-size属性来指定背景大小。

因此使用-webkit-background-size:cover。

参考 - 的 Safari versions using webkit

Answer 6

我在Stephen Gilbert的网站上发现了以下内容 - http://stephen.io/mediaqueries/。它包括其他设备及其方向。适合我！

注意：如果您从他的网站复制代码，您将需要根据您使用的编辑器编辑额外的空格。

/*iPad in portrait & landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */}

/*iPad in landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */}

/*iPad in portrait*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ }

Answer 7

它是正确的背景大小代码：

<div class="html-mobile-background">
</div>

<style type="text/css">
html {
    /* Whatever you want */
}
.html-mobile-background {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* To compensate for mobile browser address bar space */
    background: url(YOUR BACKGROUND URL HERE) no-repeat; 
 center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
 background-size: 100% 100%
}
</style>

Answer 8

@media (max-width: @iphone-screen) {
  background-attachment:inherit;    
  background-size:cover;
  -webkit-background-size:cover;
}

Answer 9

我找到了一个有效的解决方案，以下CSS代码示例针对iPad：

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

    html {  
        height: 100%;
        overflow: hidden;
        background: url('http://url.com/image.jpg') no-repeat top center fixed;
        background-size: cover; 
    }

    body {  
        height:100%;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }

}

参考链接：https://www.jotform.com/answers/565598-Page-background-image-scales-massively-when-form-viewed-on-iPad

Answer 10

html body {
  background: url(/assets/images/header-bg.jpg) no-repeat top center fixed;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;

  -webkit-background-size: auto auto;
  -moz-background-size: auto auto;
  -o-background-size: auto auto;
  background-size: auto auto;
}

CSS background-size：移动Safari的封面替换

10 个答案: