調整大小的HTML標記的背景圖像來使用CSS

我有一個顯示在html CSS樣式表在屏幕上全寬的圖像與屏幕比例繪製。身體的CSS代碼是：調整大小的HTML標記的背景圖像來使用CSS

body { 
    width: 70%; 
    margin: 0 auto 2em; 
    font: 100% Georgia, "Times New Roman", Times, serif; 
    color: #000000 
}

在身體的標題部分是身體的全寬並覆蓋背景圖像。文檔的主體包含兩列：一列包含文本，另一列包含幻燈片。

我遇到的問題是，如果我在瀏覽器窗口中放大'in'，第1列和第2列部分浮動到背景圖像中，並且看起來不太好。是否可以在用戶滾動時調整html背景圖像的大小，以使body和html圖像保持相對位置？有關如何完成預期結果的任何其他建議？我所看到的帖子似乎在處理標籤中的圖片而不是標籤。

來源

2014-09-13 Wally Fisher

與background-size財產拉伸背景圖像嘗試完全覆蓋內容區域：

html { 
    background-image: url('../images/htmlbackground.png') ; 
    background-repeat: none; 
    width: 100%; 
    background-size: 100% 100%; 
}

來源

2014-09-13 13:55:52 Hamix

如果我正確理解你的問題，CSS技巧有a variety of ways to scale a background image一個很好的教程。如果你想要一個純CSS的方式，使用此：

html { 
    background: url('../images/htmlbackground.png') center center no-repeat fixed; 
    background-size: cover; 
}

確保您使用的瀏覽器前綴，以確保它可以跨所有平臺。

來源

2014-09-13 15:31:04 Brian

調整大小的HTML標記的背景圖像來使用CSS

回答

相關問題