Question

I have a div and its width and height depend of browser window size.

I need a cross-browser solution to fill whole div with a background image. Image should not repeat itself, and stretch/shrink itself instead both vertically and horizontally.

Thank you!

---

I came up with a cross-browser solution for any of those who are interested.

Here is a code:

<div id="content">    
<div style="width:100%;height:100%;position: fixed;left: 0px;top: 0px;z-index: -1;">
    <img src="wallpaper.jpg" style="width:100%;height:100%;" alt="" /> 
</div>

Line 1<br />Line 2<br />Line 3</div>

Good luck!

Answer 1

Use:

#myDiv {
    background: url('...XXX') no-repeat;
    background-size: 100% 100%;
}

Note it is CSS3: “The background-size property is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.”