how to set size of background image fit to the div.

Question

I want to set div background image div(w:932, h:148) and the image size is 1524*587
whan I trying to set it image is not getting fit to the div size what should i do? my code-

.header .logo { width:932px; height:148px; background:url(images/logo.jpg) no-repeat center;}

Answer 1

You could use the CSS3 background-size property for this.

.header .logo {
    background-size: 100%;
}

But then you still have the problem of wide (or not) browser support. Your best bet is then really to use a "plain vanilla" <img> element whose width/height is set to 100%.

Answer 2

Take a look at this very elegant solution, which doesn't require css3 :)

Answer 3

You can't resize a background image in the currently supported version of CSS (2.1).

You could layer elements on top of each other, so that you get an image element behind your content, but you should rather resize the actual image than doing it when displaying it. That would roughly reduce the file size to a fifth.