Question

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” as if the header extends for their whole browser.

I’ve tried a few things, but I cant figure this out.

Here’s an example of what I have now:

#header {
    background: url('img/header.png') no-repeat top center;
    height: 131px;
    }

#headerbg {
    height: 131px;
    width:4000px;
    background-color:#000;
}

And in the html I just have both in divs and within each other in the html.

Answer 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.