2 Bootstrap網站沒有背景圖片沒有響應

我有2個網站我創建 - 我如何獲得標題背景圖像在移動設備上正確調整大小？當在移動設備上觀看時，兩側的圖像被切斷。2 Bootstrap網站沒有背景圖片沒有響應

我在標題部分的代碼對於每個：

下面是每個碼：

segregatedsunday.com

#h { 
    background: url(../img/header.jpg) no-repeat center top; 
    padding-top: 180px; 
    text-align:center; 
    background-attachment: relative; 
    background-position: center center; 
    min-height: 700px; 
    width: 100%; 
    color: white; 

    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 

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

whitehatdev.co

#headerwrap { 
    background: url(../img/header_bg.jpg) no-repeat center top; 
    margin-top: -50px; 
    padding-top:120px; 
    text-align:center; 
    background-attachment: relative; 
    background-position: center center; 
    min-height: 650px; 
    width: 100%; 

    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 

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

來源

2015-06-21 P. Clark

查看我的移動網站時，標題背景圖片過大，即不響應。請參閱http://mobiletest.me/以在手機上查看。 –

P.Clark。繼續編輯您的原始問題陳述。告訴我們什麼是錯的。提示：圖片價值1000字。而那個mobiletest.me鏈接是毫無價值的。或者建立一個展示該問題的示例網頁。 etc ... – zipzit

我在看你的第一個例子，它通常看起來很好。額外的100％背景大小的東西不適合這種情況。當我拖動jsfiddle越來越小時，圖像應該像「覆蓋」一樣動態調整大小。哞！

jsfiddle

#headerwrap { 
    background: url(http://www.glitters20.com/wp-content/uploads/2012/11/Funny-Cow-37.gif) no-repeat center top; 
    margin-top: -50px; 
    padding-top:120px; 
    text-align:center; 
    background-attachment: relative; 
    background-position: center center; 
    min-height: 250px; 
    width: 100%; 

    /* -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; */ 

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

不要混用蓋幷包含有你嗎？它不完全清楚你想要達到什麼目標。封面和封套將保持縱橫比，所以圖像不會變形。

包含

的包含值指定無論容納箱的的尺寸，背景圖像應被縮放，使得每個側是儘可能的大，同時不超過的長度容器的相應側。

蓋

蓋值指定背景圖像應如此尺寸，它同時確保兩個維度大於或等於容器的相應尺寸儘可能小。

來源

2015-06-21 00:56:12 zipzit

當我刪除100％的條目時，它在網頁上調整得更好一些，但不會改變移動設備上的任何內容。我嘗試了包含，而不是封面，並切斷圖像，使其不填滿屏幕的寬度（這在某些方面更好）。 –

2 Bootstrap網站沒有背景圖片沒有響應

回答

相關問題