Background Image Stretch 100% Height of Div
css, html
Solution
You need to set the `background-size` property. `background-size: 100% 100%;` will scale it to fill the container both horizontally and vertically.
I usually prefer `background-size: cover;` as it gracefully scales up the image as needed, maintaining the aspect ratio. Make sure to check the support for background-size, as it is a fairly new property.
Problem
I have a container that will grow/shrink in height based on how much text is dynamically placed inside it. The container will have a background image that needs to stretch/shrink as the container changes height and this image cannot be cropped in any way. I am wondering how would I style `.container` to get the background-image to be stay 100% of the div. I have tried the following, but it didn't seem to work: ``` .container { background: url('backgroundImage.jpg') 0 100% no-repeat; } ``` Sample of HTML Structure: ``` <div class="container"> <p class="text">This is a short container</p> </div> <div class="container"> <p class="text">This<br> is<br> a<br> tall<br> container</p> </div> ```