css - Bootstrap 背景图片在移动时不会填满空间

Question

我正在尝试在移动时填充背景图像(在高度上)。当我缩小浏览器时，我的媒体查询似乎并没有发挥作用。

这是我的 CSS 的样子:

#main {
    background-image:url(../images/cc.jpg); 
    height:650px; background-size:cover; 
    background-position:0 -210px; 
    background-repeat:no-repeat;
}

#main .row {
    margin-top:200px;
}


@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  #footer {
    font-size:10px;
  }

    #main {
        background-image:url(../images/cc.jpg); 
        height:100%; 
        background-size:cover; 
        background-repeat:no-repeat;
    }

    #id{ margin-top:90px; }

    #main .row {
        margin-top:100px;
    }

}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { 
  #footer {
    font-size:10px;
  }

    #main {
        background-image:url(../images/cc.jpg); 
        height:100%; 
        background-size:cover; 
        background-repeat:no-repeat;
    }

    #id{ margin-top:90px; }

    #main .row {
        margin-top:100px;
    }



}

如果您想查看页面的外观，请使用以下 URL:

http://www.gulflifehomes.com/

Answer 1

更改为 background-position: center; 就可以了。此外，您应该尽可能尝试将代码单行化 background: url(../images/cc.jpg) no-repeat center center fixed;。