移動時Bootstrap背景圖像沒有填滿空間

我想在移動時填充（高度）背景圖像。當我使瀏覽器變小時，它似乎不像我的媒體查詢踢英寸任何幫助將不勝感激。這裏是我的CSS是什麼樣子：移動時Bootstrap背景圖像沒有填滿空間

#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; 
    } 



}

這裏的網址，如果你想看到的頁面是什麼樣子：

http://bit.ly/10DvqBe

感謝所有您的幫助！我完全沉迷於這一個。

來源

2014-10-31 Damien

更改爲background-position: center;，並且應該做的伎倆。此外，你應該嘗試和儘可能單行你的代碼background: url(../images/cc.jpg) no-repeat center center fixed;。

來源

2014-10-31 02:47:35 Swordfish0321

使用簡寫語法幾乎總是一個偏好問題。 – 2014-10-31 02:55:28

，這似乎有幫助，但當我縮小，它仍然看起來有點小，因爲我縮小了。任何想法如何處理？ – Damien 2014-10-31 02:56:26

@ShawnErquhart以及線上較少的字節。 – Swordfish0321 2014-10-31 02:57:46

取出background-position規則或將其重置爲0的移動，如果你仍然想到位桌面。

你有很多重複的代碼。你可能只是這樣做：

#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-position: 0; } 
    #id{ margin-top:90px; } 
    #main .row { margin-top:100px; } 
}

來源

2014-10-31 02:43:00

如果要在桌面上測試媒體查詢，則應使用最小寬度或最大寬度而不是最小設備寬度或最大設備寬度。

所以做到這一點：

@media only screen and (min-width : 320px) and (max-width : 480px)

分設備和最大的設備是指屏幕的實際分辨率（即：1280×800），而不是瀏覽器的大小。這就是爲什麼您的媒體查詢在您的計算機上重新調整瀏覽器和測試時不會踢入。

來源

2014-10-31 02:48:03

這似乎沒有任何區別：\ – Damien 2014-10-31 02:51:34

那麼意味着現有的代碼不適用於移動（不是媒體查詢問題）。看看肖恩的解決方案 – 2014-10-31 02:54:18

以上，這正是我在那裏。箭魚提供的解決方案似乎解決了小寬度問題。這仍然是一個小車，但越來越近！ – Damien 2014-10-31 02:58:28

移動時Bootstrap背景圖像沒有填滿空間

回答

相關問題