Setting a divs background image to fit its size

Question

I have a  lt div gt  with a background Image   The  lt div gt  size may change over the time    Is it possible setting the Divs Background image to fit the  lt div gt  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  lt div gt  size

User · Answer

Set your css to this  img       max-width 100       max-height100

User · Answer

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

User · Answer

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

User · Answer

If you d like to use CSS3  you can do it pretty simply using background-size  like so   background-size  100     It is supported by all major browsers  including IE9    If you d like to get it working in IE8 and before  check out the answers to this question

User · Answer

Use background-size for that purpose   background-size  100  100     More on      http   www w3schools com cssref css3 pr background-size asp

User · Answer

You could use the CSS3 background-size property for this    header  logo   background-size  100

User · Answer

Use this as it can also act as responsive     background-size  cover

User · Answer

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

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

Examples related to image

Examples related to css