css - CSS 拉伸背景图片

Question

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

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

Answer 1

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

对于较旧的浏览器（尤其是较旧版本的 IE），我使用像这样的 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>