Question

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>

Answer 1

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.