背景图片不适合浏览器的整个宽度？

Question

这是我的代码：

#content{
background-image:    url('../images/hero.jpg');
background-size:     cover;                   
background-repeat:   no-repeat;
width:100%;
height: 550px;
}

为什么它不适合100％宽度和带盖的屏幕？

Answer 1

您在#content上设置了100％的宽度，而不是在背景上。试试这个：

#content {
background: url('/images/bg.png') no-repeat center center fixed;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}