如何显示全高背景图像？

Posted 2023-03-06

【中文标题】如何显示全高背景图像？

【英文标题】：How to show full height background image?

【发布时间】：2013-09-24 23:01:25

【问题描述】：

我有一张宽 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;

【问题讨论】：

Like this?

请定义“不工作”。

【参考方案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;

【讨论】：

谢谢。我一直想知道为什么这会时不时地起作用。现在我知道了：D

非常好！要知道或者可能是我从未预料到的重要事实，这就是为什么我有点惊讶。所有的操作，你应该在设置background-image之后进行。我之前设置了background-size，但它不起作用。

【参考方案2】：

CSS 可以通过 background-size: cover;

做到这一点

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

像这样使用纵横比：

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

FIDDLE

【参考方案3】：

body
    background-image: url("../images/shape/Online_Do`kon.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    height: 100vh;

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

【讨论】：

很好的解决方案。 100vh 很好。

这会破坏纵横比

【参考方案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;

【参考方案5】：

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

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

这会将 css 作为 height: 100vh