Central div for content with graphical background image that reaches from far container edge to left edge of screen?

I have a content div that is centred on the page:

<div id="container>
</div>

#container {
margin: 0 auto;
width: 960px
}

I want a background image that is a 1px high and 1000px wide gradient to span from the right edge of #container to the left edge of the web browser. I've made the gradient so the edge colour is a solid colour so I can hopefully just specify a solid colour as background so if the browser goes super wide it doesn't look janky.

any ideas how to do this? t开发者_Python百科hanks!

If I'm following you correctly, the solution requires you to matte the gradient background image and center it horizontally within the appropriate element (be it #container or its immediate parent element). Investigation of padding values for #container might also yield some good results.

I think you mean something like this.

And to stretch the left colour over the total height of the window, replace absolute with fixed.

But it is much easier to make the background image say 3000 pixels wide (and only the center 960 pixels containing the gradient, like this one) and attach it to the background as follows:

body {
    background: url('/images/gradient3000x1.png') repeat-y center;
}

Then you don't have to worry about the height of your content.