Question

Having this issue getting a background to work… It requires an image of 3 parts.. (top, center, bottom)

I’ve got it close.. i’m sure i’m missing something easy… Please check out this jsfiddle and see if it can get dialed in!

http://jsfiddle.net/bb6hZ/

Thanks!!

What I have:

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

I’m using two extra bg div’s to try and acheive this… I created the image file already, it is located here: http://www.pacificcheese.com/img/int/bg_article.png

I’ve done this many times before in the past I just can’t remember exactly how… Haven’t needed to use this method in years.

Help would be appreciated!!! THanks!

Answer 1

got it!

the trick is to float all the elements… see 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;}