如何显示全高背景图像

Question

我有一个照片类型（不是横向）背景图像，宽度为 979px x 高度 x 1200px。我想将其设置为向左浮动并固定显示 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;
}

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

Answer 2

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

它也可以覆盖整个高度和宽度

Answer 3

CSS 可以使用 background-size： cover;

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

像这样使用纵横比：

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

小提琴

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

Answer 5

这对

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

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

这采用 css 作为高度：100vh