无论显示器的大小如何,如何使背景适合屏幕的整个尺寸?

时间:2014-11-23 23:03:17

标签: html css ruby-on-rails html5 css3

无论显示器的尺寸是多少,如何使背景适合屏幕的整个尺寸?

我遇到的主要问题是我在一个页面上有两个背景。一个在另一个上面,所以第一个上部背景根本没有填满整个屏幕。

这可能与两个背景有关吗?

这是CSS,landing-bg2是上部bg,内容是下部

#content {
    background-color: #eb6e1e;
    position: relative;
    background-position: center top;
    background-size: cover;
    -webkit-background-size: cover;
    height: auto;
    padding: 160px 0 120px;
    color: #fff;
}
.landing-bg2 {
    background: asset-url("write-bg.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;

}

1 个答案:

答案 0 :(得分:1)

现在浏览器对多个背景的支持非常好,如果你想要两个全尺寸背景图像,你可以在同一个div中声明它们。

继承浏览器支持:http://caniuse.com/#feat=multibackgrounds

语法为:background-image:url(''), url('');

逗号分开。然后,您需要在background-size:background-position声明中保持相同的顺序。