流體佈局背景100％寬，每邊50px填充

Question

好吧，所以我需要添加一個背景圖片重複100％，但我需要每邊的邊距。

****************************************** 
* *        * * 
* 50 *        * 50 * 
* px * This background image should * px * 
* * repeat-x 100% minus 100px. * * 
* *        * * 
****************************************** 

Answer 1

我將在專區內使用一個div。這樣你可以將背景應用到第二個div，讓第一個div擔心邊距。

#div1 { 
    margin: 0 50px; 
} 

#div2 { 
    background: url('XXX') no-repeat; 
    background-size: 100% 100%; 
} 

請注意：背景的大小是一個CSS3屬性和IE9 +，Firefox 4以上，歌劇，鉻，和Safari 5+支持。

或者使用：

#div { 
    background: url('XXX') repeat-x; 
    margin: 0 50px; 
} 

這是不是很好的做法，我不確定這是取決於，如果你的背景是彩色/圖形或圖像的最佳解決方案。如果不是圖像，請使用後一種解決方案。