html - 棘手的 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 fiddle：

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; }