Question

I have the following HTML:

<section id="infopic" class="grid_5 prefix_1" style="height: 500px;">
   <div id="login-image"></div>
</section>

and this CSS:

#infopic {
   background-image: url("/Images/login.png");
}

I have a few different ways to make my image stretch to fit the boundaries of the #infopic but still cannot get this to work right. Right now it repeats in the code above the image (which is smaller than 500px square) just repeats.

Answer 1

Use like this:

img {
  background-size: 100%;
  max-width: 100%;
}

Reference:

Fliud Images