基於網格的CSS：如何處理網格外的背景圖片

Question

當您嘗試使用網格系統（如說，960或藍圖或YUI）時，您會做什麼，並且設計中包含清晰的背景圖片不符合列或排水溝？

<div class="grid_4 my_background"> 
A background image... 
</div> 

.my_background { 
background: url(someimage.jpg); 
} 

Answer 1

如果我明白你的問題，你應該考慮用包裝DIV（gridWrapper在下面的示例代碼）周邊網格格，並將其放置在absolute在例如定位<img>（gridBackground代碼如下），其中z-index比包含網格系統的底層div更大（如果它看起來像你提供的圖片）或更低（如果它是合適的背景）。

隨着你有沒有運氣與IE7，IE8來控制它的大小，因爲它們不支持background-size屬性（因爲你可以看到here）的background-image CSS屬性的圖像。

使用<img>元素，您可以根據網格大小操縱此「背景」的大小。

<div id="gridWrapper"> 

    <img id="gridBackground" src="your image url" /> 

    <div class="grid_4"> 
     <!-- your grid here --> 
    </div> 

</div> 

...和CSS：

#gridBackground { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: 0; 
} 

div.grid_4 { 
    z-index: 10; 
} 

如果你的背景圖片已平方的比例，你與它的罰款。否則，你必須照顧最終的扭曲或空的空間。

如果你不關心IE7，IE8出於某種原因，你可以簡單地做你的地方作爲背景圖片：

div.grid_4 { 
    background-image: url(your/image/url); 
    background-size: length|percentage|cover|contain; 
} 

你可以選擇適合的你最好的佈局要求background-size屬性值閱讀here。