Making a div content to "bleed" on the bottom (or prevent the background image to render)

Question

Okey so basically I have:

<div id="content">
  ... content of arbitrary size ...
</div>
<div id="content_bottom"></div>

The style is:

#content {
    background: transparent url(content_tile.png) center top repeat-y;
    width: 800px;
}
#content_bottom {
    background: transparent url(content_bottom.png) center top no-repeat;
    height: 200px;
    width: 800px;
}

content_tile.png is a 800x1 image (tiles vertically), and has transparency. content_bottom.png is a 800x200 image.

Basically, I need to have the content_bottom.png image to replace the #content background image only on the bottom. Having a negative margin on #content almost works, but since both images are transparent images, they overlap, and it should not happen.

I think that I need to make #content not to render its background on the last 200px on its bottom. Any idea how I could do that ?

Answer 1

create a third div, nested in #content, that is 200px height.

Answer 2

If you altered your markup slightly and used javascript you could do it with an absolutely positioned div that contained only the background. Then onload, set #repeating-background's height to (#content's height - 200px):

HTML

<div id="content">
    <div id="text">
         This is where your content would go
    </div>      
    <div id="repeating-background"></div>
</div>

CSS

#content {
   position: relative;
   width: 800px;
   background: url(content_bottom.png) left bottom no-repeat;
}

#text {
   position: relative;
   z-index: 2;
}

#repeating-background {
   position: absolute;
   z-index: 1;       
   top: 0;
   left: 0;       

   width: 800px;
   height: 1px;

   background: url(content_tile.png) left top repeat-y;
}

Javascript (jQuery)

$(document).ready(function() {
    $('#repeating-background').height($('#content').height() - 200);
});