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

b5buobof 于 2023-02-06 发布在其他

关注(0)|答案(5)|浏览(202)

我有一张照片类型（非风景）的背景图像，宽979px，高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;
}

css

来源：https://stackoverflow.com/questions/18901819/how-to-show-full-height-background-image

5条答案

按热度按时间

iqxoj9l91#

您可以使用现有的代码完成此操作，只需确保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;
}

赞(0）回复(0）举报 2023-02-06

ef1yzkbh2#

CSS可以使用background-size来实现这一点：封面;
但是要更详细和支持更多的浏览器...
使用如下纵横比：

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

FIDDLE

赞(0）回复(0）举报 2023-02-06

9rygscc13#

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

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

赞(0）回复(0）举报 2023-02-06

ffx8fchx4#

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

赞(0）回复(0）举报 2023-02-06

ulydmbyx5#

这对我很有效（虽然它是用于reactjs & tachyons作为内联CSS）

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

这将css作为height：100伏小时

赞(0）回复(0）举报 2023-02-06

我来回答

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

5条答案

相关问题

热门标签

最新问答