[image] Setting a divs background image to fit its size?

I have a <div> with a background Image.

The <div> size may change over the time.

Is it possible setting the Divs Background image to fit the <div> size?

Lets say I have a div which is 400x400 and an Image which is 1000x1000, is it possible to shrink the image to 400x400 and therefore fit the <div> size?

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

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

Use this as it can also act as responsive. :

background-size: cover;

Use background-size property to achieve that. You should choose between cover, contain and 100% - depending on what exactly you'd like to get.

You can achieve this with the background-size property, which is now supported by most browsers.

To scale the background image to fit inside the div:

background-size: contain;

To scale the background image to cover the whole div:

background-size: cover;

Use background-size for that purpose:

background-size: 100% 100%;

More on:

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Set your css to this

img {
    max-width:100%,
    max-height100%
}

Wanted to add a solution for IE8 and below (as low as IE5.5 I think), which cannot use background-size

div{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
'/path/to/img.jpg', sizingMethod='scale');
}