Fixed width div in center of screen with two either side of it to fill rest of screen?

So, I have this wonderful image here:

And what it is is a header for a website - click it to view it full size..

I need to re-create this using HTML/CSS/images and I can't figur开发者_高级运维e out how. It has to be 100% width yet, the point where the gradient turns from one type to the other, has to remain in the same place on resize. To illustrate:

The area that is not blacked out must stay in the center of the page at all times and not move. The areas in black must extend to 100% of the screen width and have a tiled background gradient.

How can this be done?

I have tried something like this:

Where green is a div with a fixed width and centered yellow is the 'twirl' gradient bit and then red/blue are the tiling gradients. But this does not work because the tiling gradients to not match the position of the 'twirl' when the browser is resized.

Note: This must support IE7+ and must be cross-browser compatible and preferably uses no javascript.

I’m not sure why do you actually want to make this so hard by cutting the image up into pieces?

Take the image, extend the canvas to let’s say 5000px and just repeat the gradients to both sides. You’ll maybe add about 200 bytes (yes, bytes, not kilobytes) to the image size, but you’ll make it all up without adding 2 more requests for the separate backgrounds to the page.

And then just set the image to background-position: center top;

And as the center DIV is fixed width, you can either add a container to have the background or add the background to BODY for example.

Well, I think I've managed to do it..

<header>
    <div id="bg-left"></div>
    <div id="bg-right"></div>
    <div id="header-content">
        My header contents
    </div>
</header>

And

header {
    height:88px;
}
header #header-content {
    width:1004px;
    height:88px;
    position:absolute;
    left:50%;
    margin-left:-502px;
    background-image:url("/img/header-bg-middle.png");
}
header #bg-left, header #bg-right {
    position:absolute;
    height:88px;
}
header #bg-left {
    background-image:url("/img/header-bg-left.png");
    width:50%;
}

header #bg-right {
    width:50%;
    background-image:url("/img/header-bg-right.png");
    right:0px;
}

So basically, I am creating a fixed width div in the center of the page, and then behind that I create two 50% width divs that have the appropriate gradient background.

Id do the same thing as you started doing with the one 'twirl' being centered, with two divs on the outside... the way I would do this is like this:

this is what i have:

<div style="width:100%">
        <div style="background:#333; position:absolute; left:50%; top:0; width:50px; margin:auto; height:50px; z-index:10;">
        </div>
        <div style="width:50%; position:absolute; left:0; top:0; background-color:#060; height:50px; margin:0; z-index:1">
        </div>
        <div style="width:50%; position:absolute; right:0; top:0; background-color:#060; height:50px; margin:0; z-index:2">
        </div>
    </div>
    </div>

which can be viewed here: http://sunnahspace.com/TEST.php

basically you have a container div, which if you decide to move this around at all id make relative positioned. then youd take the piece where the gradients change and make that your 1st inner div, with the different gradients your 2nd and 3rd div. Basically, the 1st div (the "twist") is positioned to stay in the same place of the browser (the middle, see the 50%, but this can be set to say 200px from the right, etc.) with the other two divs expanding when browser window sizes change. The z-index layers the css, so the 1st one having a z-index of 10 is on top (the number hardly matters so long as it is the highest number, but leaving it like this allows you to add more layers underneath without having to change the z-index, with the other two having z-indexes of 1 and 2, doesnt matter which order so long as they are less than the top div, this lets the first div sit on top of these two divs, hiding where they meet. Should work, let me know how it goes, and if need be ill fix a few things.

Is this what you want to do? http://jsfiddle.net/nnZRQ/1/