Html CSS 背景大小：移动 Safari 的封面替换

Question

提问by Josh

Hi I have several divs on my page which have background images that I want to expand to cover the entire div which in turn can expand to fill the width of the viewport.

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

Obviously background-size: coverbehaves unexpectedly on iOS devices. I've seen some examples of how to fix it, but I can't make them work in my situation. Ideally I'd prefer not to add extra <img>tags to the HTML but if it's the only way then I will.

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

Here is my code:

这是我的代码：

.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>

The question is, how can I get the background image to completely cover the section div, taking into account the variable width of the browser and the variable height of the content in the div?

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

Answer 1

采纳答案by Zone6

I've had this issue on a lot of mobile views I've recently built.

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

My solution is still a pure CSS Fallback

我的解决方案仍然是纯 CSS Fallback

http://css-tricks.com/perfect-full-page-background-image/as three great methods, the latter two are fall backs for when CSS3's cover doesn't work.

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 2

回答by mkubilayk

I have had a similar issue recently and realised that it's not due to background-size:coverbut background-attachment:fixed.

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

I solved the issue by using a media query for iPhone and setting background-attachmentproperty to scroll.

我通过对 iPhone 使用媒体查询并将background-attachment属性设置为scroll.

For my case:

对于我的情况：

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

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

Edit: The code block is in LESS and assumes a pre-defined variable for @iphone-screen. Thanks for the notice @stephband.

编辑：代码块在 LESS 中，并为@iphone-screen. 感谢@stephband的通知。

Answer 3

回答by bit-less

Also posted here: "background-size: cover" does not cover mobile screen

也贴在这里：“背景尺寸：封面”不包括手机屏幕

This works on Android 4.1.2 and iOS 6.1.3 (iPhone 4) and switches for desktop. Written for responsive sites.

这适用于 Android 4.1.2 和 iOS 6.1.3 (iPhone 4) 和桌面开关。为响应式网站编写。

Just in case, in your HTML head, something like this:

以防万一，在你的 HTML 头中，像这样：

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

HTML:

HTML：

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

CSS:

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

回答by dhaupin

There are answers over the net that try to solve this, however none of them functioned correctly for me. Goal: put a background image on the bodyand have background-size: cover;work mobile, without media queries, overflows, or hacky z-index: -1;position: absolute;overlays.

网上有一些答案试图解决这个问题，但没有一个对我来说是正确的。目标：把背景图像上body，并有background-size: cover;工作手机，没有媒体查询，overflows或哈克z-index: -1;position: absolute;覆盖。

Here is what I did to solve this. It works on Chrome on Android even when keyboard drawer is active. If someone wants to test iPhone that would be cool:

这是我为解决此问题所做的工作。即使键盘抽屉处于活动状态，它也适用于 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 */
}

Here is the magic. Treat htmllike a wrapper with a ratio enforced height relative to the actual viewport. You know the classic responsive tag <meta name="viewport" content="width=device-width, initial-scale=1">? This is why the vhis used. Also, on the surface it would seem like bodyshould get these rules, and it may look ok...until a change of height like when the keyboard opens up.

这就是魔法。将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

回答by Rajesh Paul

For Safari versions <5.1the css3 property background-sizedoesn't work. In such cases you need webkit.

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

So you need to use -webkit-background-sizeattribute to specify the background-size.

所以你需要使用-webkit-background-size属性来指定background-size。

Hence use -webkit-background-size:cover.

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

Reference-Safari versions using webkit

参考 -使用 webkit 的 Safari 版本

Answer 6

回答by Mason

I found the following on Stephen Gilbert's website - http://stephen.io/mediaqueries/. It includes additional devices and their orientations. Works for me!

我在 Stephen Gilbert 的网站上找到了以下内容 - http://stephen.io/mediaqueries/。它包括其他设备及其方向。为我工作！

Note: If you copy the code from his site, you'll want to edit it for extra spaces, depending on the editor you're using.

注意：如果你从他的网站复制代码，你需要编辑它以获得额外的空间，这取决于你使用的编辑器。

/*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

回答by supetcriss

That its the correct code of background size :

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

<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

回答by Amit Nanda

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

Answer 9

回答by Paul Vincent Beigang

I found a working solution, the following CSS code example is targeting the iPad:

我找到了一个可行的解决方案，以下 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;
    }

}

Reference link: https://www.jotform.com/answers/565598-Page-background-image-scales-massively-when-form-viewed-on-iPad

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

Answer 10

回答by Pascal

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;
}

Html CSS 背景大小：移动 Safari 的封面替换

提问by Josh

采纳答案by Zone6

回答by mkubilayk

回答by bit-less

回答by dhaupin

回答by Rajesh Paul

回答by Mason

回答by supetcriss

回答by Amit Nanda

回答by Paul Vincent Beigang

回答by Pascal

相关推荐

最近更新

标签

Html CSS 背景大小：移动 Safari 的封面替换

提问by Josh

采纳答案by Zone6

回答by mkubilayk

回答by bit-less

回答by dhaupin

回答by Rajesh Paul

回答by Mason

回答by supetcriss

回答by Amit Nanda

回答by Paul Vincent Beigang

回答by Pascal

相关推荐

HTML 图像不显示，而 src url 有效

Html 如何在不拉伸的情况下调整图像大小？

如何在 HTML 视频标签中播放 FLV 视频？

Html CSS 属性选择器在 href 中不起作用

相关推荐

最近更新

标签