Add Background "bars" To Extend Header Image With Color. Or Put Image Over Div Bars

I basically made a header image for my site and the sides of it have black on it. I want to extend the header so it goes for the width of the user's web browser with black 'bars'

Solution 1:

Here's a jsFiddle that shows you how to layer the two div's and use background-size property to expand the image so it fits just the same as the background color's width. UPDATE: New jsFiddle above is replaced to include better method for that type of look.

Edit: Here is a different jsFiddle that has places the image inside and centers it, allowing any excess background color from the parent container to show through.

Edit 2: Using the Edit fiddle above, you can apply CSS3/IE gradient effect as shown in this jsFiddle

Status: The solution was to use center center for background-position combined with setting both width and height to 100% for the image used.