52

我有一张照片类型（不是风景）背景图片，宽度为 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;
}
4

5 回答 5

95

您可以使用您拥有的代码来执行此操作，您只需要确保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;
}
于 2013-09-19T18:13:55.717 回答
6

CSS 可以通过background-size: cover;做到这一点。

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

像这样使用纵横比：

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

小提琴

于 2013-09-19T18:10:43.747 回答
4 
body{
    background-image: url("../images/shape/Online_Do`kon.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    height: 100vh;
}

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

于 2021-04-23T12:24:45.273 回答
2 
 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;
}
于 2019-02-28T11:56:20.847 回答
0

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

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

这将css作为高度：100vh

于 2020-11-15T08:01:08.677 回答