Image stretching

Question

I have a wrapper div that contains arbitrary content (I don't know its length). How can I put a background image that stretches the entire length since background images are not stretched?

I tried with a div containing an img tag. The div has a lover's z-index, the rest of the content, and position: absolute . The problem is that the image is larger than the content, and therefore it just makes it longer (the wrapper has overflow: auto ).

 <div id="wrapper"> <div id="image-wrapper" style="position: absolute"><img src="bg.jpg"></div> [.. OTHER CONTENT ..] </div> 

If I set the div and the width and height of the image is 100%, this takes up the height of the window, not the wrapper.

Any help?

Answer 1

background-size is available with CSS3:

 #image { background-image: url("bg.png"); background-size: auto; } 

auto is the default and does not stretch the image.

You can set the width and height manually:

 #image { background-size: 100% 100%; } 

or

 #image { background-size: 500px 300px; } 

Alternative: background-size: contain and background-size: cover .

contain stretches the image so that the image is as large as possible, but completely visible inside the element, while cover stretches the image to 100% width, regardless of whether the image is cropped at the top and / or bottom.

But different browsers are not compatible when rendering the background with these keywords.

Answer 2

If you want to use JavaScript, select Supersized . This seems to work well for this particular case.

Answer 3

you can also try the html5 method on the image.

 #image-wrapper img {max-width: 100%} 

Answer 4

Add position: relative to the styles for #wrapper .

http://css-tricks.com/absolute-positioning-inside-relative-positioning/