1

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!

Davit
  • 1,394
  • 5
  • 21
  • 47

1 Answers1

0

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+."

Rick Donohoe
  • 7,081
  • 6
  • 26
  • 38
  • It's great. Thank you, I knew about background-size:100%, but background-size:100% 100%; is doing exactly what I want. I will try to find a cross-browser solution, and if it won't work then I'll stick with CSS3. Great, thanks for help! – Davit Oct 24 '12 at 10:07