CSS for a header with both fixed-width and dynamic width images

Hi,

I need my header to consist of five parts:

• Two fixed-width images on the left and right side
• A fixed-width image in the middle, centered
• Two dynamic width images between these, to fill the gaps

Here's a schematic representation of what I want:
http://i51.tinypic.com/15gfqm0.jpg
The red and blue parts are fixed, the green parts are there just to fill the gaps between the red and blue parts when the header is resized. The blue part in the middle should stay centered.

The image in the green parts of course tiles horizontally so that it can be repeated indefinitely.


How can I achieve this?

So far I got this:

css Code:

.title_left
{
    float: left;
    width: 250px;
    height: 126px;
    background: url('../Images/header_left.jpg')
}
 
.title_right
{
    width: 250px;
    height: 126px;
    background: url('../Images/header_right.jpg')
}
 
.title_middle
{
    width: 400px;
    height: 126px;
    background: url('../Images/header_middle.jpg')
}
 
.title_fill   /* green parts */
{
    width: ???;  /* (auto doesn't work) */
    height: 126px;
    background: url('../Images/header_fill.jpg')
}

I've tried a few variations, having float: left and right on various styles, but nothing gives me what I want... The biggest problem is that the fill parts (green parts) are stretched toward the end of the page (width: auto) and not toward the next image, so that the next image is pushed down...

Thanks!