如何显示全高度的背景图片？

Question

我有一张照片类型（非横向）的背景图片，宽度为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;
}

- hangee

---

像这样吗？ - Zach Saucier

请定义 "not working"。 - showdev

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

- Kevin Lynch

---

谢谢。我一直想知道为什么这有时候能工作。现在我知道了:D - Alexandre Bourlier

非常不错！需要注意的重要事实是，在设置 background-image 后，所有操作都应该在其后进行。我之前设置了 background-size，但它却没有起作用，这让我感到有些惊讶。 - tech_geek

Answer 2

body{
    background-image: url("your_image_src");
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    height: 100vh;
}

它可以完全覆盖高度和宽度。

- Alijon Jumanazarov

---

好的解决方案。100vh很好。 - Reza Taba

这会破坏宽高比。 - Kamran Asgari

“100vh” 在移动设备上不起作用。 - wittgenstein

Answer 3

CSS可以通过background-size: cover;实现这一点。

但为了更加详细并支持更多的浏览器...

使用如下的宽高比：

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

FIDDLE

- Riskbreaker

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

- him

Answer 5

这对我有用（虽然它是为reactjs和tachyons作为内联CSS而设计的）

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

这将 css 解释为 height: 100vh

- manzim