Question

让这个问题得到一个背景工作......它需要一个3部分的图像..（顶部，中间，底部）

我已经接近了......我确定我错过了一些简单的东西......请查看这个jsfiddle，看看它是否可以拨入！

谢谢！

我有什么：

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

棘手的CSS /图像背景

2 个答案: