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

CSS可以使用 background-size：cover;

来实现

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

使用像这样的宽高比：

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

FIDDLE

Answer 3

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

Answer 4

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

b = zeros(size(a));
b(idx) = a(idx);
a = b;

这将CSS作为高度：100vh

Answer 5

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

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

如何显示全高背景图片？

5 个答案: