Fill a whole dynamic DIV (may be of different sizes) with a background
-
14-07-2021 - |
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!
Solution
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+."
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow