html - 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 is this There is a header for a website - click it to see it full size ..

I need to recreate it using HTML / CSS / images and I do not know this That is how it should be 100% width, the point from which it has been changed from one type to another, its size should be in the same place, which The car. For example:

The area is not black, it should stay at the center of the page all the time and should not move forward. The width of the screen should be increased to 100% in the area of ​​black and there will be a tiled background gradient.

How can this be done?

I have tried to do something like this:

Where there is a fixed width and centered yellow in green, it is the 'rotation' gradient and Then there are red / blue color tiling gradient. But this does not work because the tiling gradient does not match the position of the 'rotation' at the time the shape of the browser changes.

Note : This should support IE7 + and is cross-browser compatible and preferably no Javascript is used.

I'm not sure why you really want to make the image so difficult to cut into pieces for?

Take the image, say to extend the canvas, say 5000 px and repeat the shields on both sides. You can add approximately 200 bytes (yes, bytes, not kilobytes) to the image size, but you can do all this without having to add 2 more requests for different backgrounds on the page.

And then set the image in the background position: center top;

and as opposed to the center DIV fixed width You can either add a container for the background or for example background can be added in the background.