響應CSS背景圖片問題

我用基金會5框架來設計一個頁面。它在背景圖像的頂部放置了一個徽標。鏈接：Demo Page 響應CSS背景圖片問題

這些兩個圖像的樣式是：

header { 
    position: relative; 
} 
.logo { 
    background: url("../img/text2save.png"); 
    background-position: left top; 
    background-repeat: no-repeat; 
    background-size: contain; 
    position: absolute; 
    z-index: 2; 
    width: 20%; 
    height: 80px; 
} 
header div { 
    background: url("../img/banner.jpg"); 
    background-repeat: no-repeat; 
    height: 300px; 
    background-size: 100%; 

}

問題：當瀏覽器被調整大小向下的背景圖像離開下方即空白空間，在另一元件向下移動。我找不出解決方案。

網站：http://text2save.tushark.com.np

來源

2014-01-14 Tushar Khatiwada

的問題是，因爲你正在使用你的DIV

最簡單的方式，以不顯示空白（壞）靜態高度：

background-size: auto 100%;

使用媒體查詢（最好）：

@media (max-width:500px) { 
    header div{ 
    height : 150px; 
    } 
}

和更好的解決方案：

不要你的形象上使用的文字，對HT最好寫毫升，永遠會顯示它。

來源

2014-01-14 05:10:46 kamus

之所以有多餘的空間，是因爲你有靜態設置頁眉高度300像素。與此同時，背景圖片在調整頁面大小時會縮放，因爲它的大小是頁面寬度的100％，當您將窗口縮小/變大時，寬度會發生變化。

要麼使高度相對於背景圖像大小，要麼使背景圖像大小靜態。

來源

2014-01-14 05:01:01 Christina

感謝您的指導。我使用了不同的媒體查詢並更改了相應查詢的高度樣式。 –

響應CSS背景圖片問題

回答

相關問題