Question

我有一个大图像用作页面的background-image。我想要的是图像的高度将被拉伸以填充页面的高度。它也应该集中在一起。

background: black url("/image/background.jpg") no-repeat fixed center;

Answer 1

background-size: cover将在现代浏览器中发挥作用 - 有关详细信息，请参阅mozilla的documentation。

对于旧浏览器（尤其是旧版本的IE），我在使用this one之类的jQuery插件方面取得了很大的成功，可以模拟这种行为。

Answer 2

这是一篇很好的写作

http://css-tricks.com/perfect-full-page-background-image/

它的要点

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 3

将此添加到css

{
background: black url("/image/background.jpg") no-repeat fixed center;
height: 100%;
width:100%
}

Answer 4

我认为使用div是获得所需效果的最简单方法。

<div id="background">
    <img src="/image/background.jpg" class="stretch" alt="" />
</div>
    <style>
    #background {
        background-color:#000000;
        width: 100%; 
        height: 100%; 
        position: fixed; 
        left: 0px; 
        top: 0px; 
        z-index: -1;
    }

    .stretch {
        width:100%;
        height:100%;
    }
    </style>

CSS拉伸背景图像

4 个答案: