棘手的CSS /圖片背景

Question

存在這種問題得到一個後臺工作......這需要3個部分的圖像。（頂部，中部，底部）

我知道了密切的...我確定我錯過了一些簡單的東西...請檢查出這個jsfiddle，看看它是否可以撥打！

http://jsfiddle.net/bb6hZ/

謝謝！

我有什麼：

<article> 
<div class="bg1"> 
    <div class="bg2"> 
     <h2>post name title here yo</h2> 
     <span class="meta">September 10, 2012</span> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 
</div> 
</article> 

我用兩個額外的BG div的嘗試，並達致這......我創建的映像文件已經，這裏位於：http://www.pacificcheese.com/img/int/bg_article.png

我在過去，我已經做了很多次，我只是不記得如何...多年來不需要使用這種方法。

幫助將不勝感激!!!謝謝！

Answer 1

明白了！

訣竅是浮動的所有元素......看到JS提琴：

http://jsfiddle.net/bb6hZ/2/

article,.bg1,.bg2 {background:url("http://www.pacificcheese.com/img/int/bg_article.png") -556px 0 no-repeat; float:left;} 
article {display:block; width:556px; background-position:0 0; padding-top:130px;} 
.bg1 {background-repeat:repeat-y;} 
.bg2 {background-position:-1112px 100%; margin:-130px 0; padding:30px 20px 45px;} 

Answer 2

試試這個：

.bg1 {background-repeat:repeat-y; border:transparent 1px solid; }