how to set background image size= 100% or stretch upto the full <div> background.

Question

my css code=

background:url(images/solu_bg.png) no-repeat left top;

but it not covering the whole div background area.why?

Answer 1

There is no way (except possibly using things proposed for CSS 3 that do not enjoy wide support) to scale background images (and browsers are pretty poor at scaling images anyway).

It is possible to fake it by absolutely positioning a foreground (content) <img> behind the content, but this is just an ugly hack (with some nasty side effects if, for example, the stylesheet isn't displayed and you get the image loaded inline with the content).

It is better to design your page to use single images (that can blend to a solid colour) or repeating images.

Answer 2

Here are some instructions for how to do this.

But as David Dorward says in his answer, it's an ugly hack.

Answer 3

CSS3 has a property called background-size which you could use (however it's not fully supported by all browsers):

body {
    background-size: cover;
    -moz-background-size: cover; /* for Firefox */
}

there's more info at ALA