CSS 如何显示全高背景图像？

How to show full height background image?

提问by hangee

I have a photo type (not landscape) background image with 979px width by 1200px height. I would like to set it to float left and show 100% full image height fixed, without the need to scroll up/down (regardless of content length).

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

This is my CSS code, but it is not working:

这是我的 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;
}

回答by Kevin Lynch

You can do it with the code you have, you just need to ensure that htmland bodyare set to 100% height.

你可以用你拥有的代码来做，你只需要确保html和body设置为 100% 高度。

Demo: http://jsfiddle.net/kevinPHPkevin/a7eGN/

演示：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;
}

回答by Riskbreaker

CSS can do that with background-size: cover;

CSS 可以使用background-size: cover;

But to be more detailed and support more browsers...

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

Use aspect ratio like this:

像这样使用纵横比：

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

FIDDLE

小提琴

回答by him

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