如何显示全高背景图像？答案

【问题标题】：How to show full height background image?如何显示全高背景图像？
【发布时间】：2013-09-24 23:01:25
【问题描述】：

我有一张宽 979 像素、高 1200 像素的照片类型（不是横向）背景图片。我想将其设置为向左浮动并固定显示 100% 的完整图像高度，而无需向上/向下滚动（无论内容长度如何）。

这是我的 CSS 代码，但它不起作用：

img, media {
    max-width: 100%;
}

body {
    background-color: white;
    background-image: url('../images/bg-image.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

【问题讨论】：

Like this?
请定义“不工作”。

标签： css image background

【解决方案1】：

您可以使用您拥有的代码来做到这一点，您只需确保将html 和body 设置为100% 高度。

演示：http://jsfiddle.net/kevinPHPkevin/a7eGN/

html, body {
    height:100%;
} 

body {
    background-color: white;
    background-image: url('http://www.canvaz.com/portrait/charcoal-1.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

【讨论】：

谢谢。我一直想知道为什么这会时不时地起作用。现在我知道了：D
非常好！要知道或者可能是我从未预料到的重要事实，这就是为什么我有点惊讶。所有的操作，你应该在设置background-image之后进行。我之前设置了background-size，但它不起作用。

【解决方案2】：

CSS 可以通过 background-size: cover;

做到这一点

但要更详细，支持更多浏览器...

像这样使用纵横比：

 aspectRatio      = $bg.width() / $bg.height();

FIDDLE

【讨论】：

【解决方案3】：

body{
    background-image: url("../images/shape/Online_Do`kon.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    height: 100vh;
}

这将创建完全响应的图像并显示 100% 的图像高度，但实际上不会覆盖全屏高度

【讨论】：

很好的解决方案。 100vh 很好。
这会破坏纵横比

【解决方案4】：

 html, body {
    height:100%;
}

body { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

【讨论】：

【解决方案5】：

这对我有用（尽管它适用于用作内联 CSS 的 reactjs 和 tachyons）

<div className="pa2 cf vh-100-ns" style={{backgroundImage: `url(${a6})`}}> 
........
</div>

这会将 css 作为 height: 100vh

【讨论】：