Variable height div with custom background-image - what is the best technique?

Question

I'd like to produce something like the 4 boxes at the bottom of the apple.com home page, except I would like them to be variable height.

The simplest techniques I can think of is having two divs. The first one containing everything except the bottom 'cap' in its background-image, and the second div with the bottom cap, like so:

<div class="top-and-middle">
</div>
<div class="bottom">
</div>

/-----------------\   ^
|                 |   |
|                 |   |
| top-and-middle  |   | <this height can stretch
|                 |   |
|                 |   v
-------------------
|      bottom     |
\-----------------/

But this seems to me to be not so elegant.. it there a better way? Maybe just one div? Preferably with just CSS, but possibly PHP or Jquery too.

Answer 1

The usual technique used today is nested divs, rather than separate. Each has its own background image, one top-aligned, one bottom-aligned, with the inner (front) background non-repeating, and the other (back) background tall enough to fit any reasonable height of div.

<div class="box"><div class="wrap">
    content
</div></div>

.box { background: url(/img/box-top-and-middle.png) top left no-repeat; }
.box .wrap { background: url(/img/box-bottom.png) bottom left no-repeat; }

The advantage of this is you can more easily have the edge background underneath the content.

This was popularised as ‘sliding doors’ for the horizontal case (though the technique was certainly in use well before that article). Various other combinations, such as three nested divs with a repeating main-background and separate side images, and in the pathological case an 9-deep nest of divs for all the sides (you never really need this in practice).

The good news is that in CSS3 you can have multiple background images on a single element, removing the need for any extra wrapper divs:

.box {
    background:
        url(/img/box-top-and-middle.png) top left no-repeat,
        url(/img/box-bottom.png) bottom left no-repeat;
}

this is part of the nifty Backgrounds and Borders module. Unfortunately it's not supported in IE until the upcoming version 9, so you can only get away with using it if you don't mind it looking skewiff in current IE versions and other older browsers.