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/

我正在尝试使移动时的背景图片（高度）充满。当我缩小浏览器的尺寸时，似乎无法启动媒体查询。这是我的CSS的样子：＃...

Answer 1

更改为background-position: center;，应该可以解决问题。另外，您应该尝试并在可能的情况下单行代码background: url(../images/cc.jpg) no-repeat center center fixed;。

Answer 2

如果要在桌面上测试媒体查询，则应使用min-width或max-width

Answer 3

删除background-position规则，或者如果仍然需要在台式机上将其重置为0，则用于移动设备。