如何显示全高背景图片？

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

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();

小提琴