Background image for filling all the div in background position

filling the div with a dynamic image using css background

by heriberto perez

HTML

<div id='main-container'>
  <article class="fsr-container" style="background-image: url(https://staging.revo.com/images/green-water-intro.jpg);">
    <img src="https://staging.revo.com/images/green-water-intro.jpg">
  </article>
    <article class="fsr-container" style="background-image: url(https://staging.revo.com/images/green-water-intro.jpg);">
    <img src="https://staging.revo.com/images/green-water-intro.jpg">
  </article>
</article>

CSS

.fsr-container {
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  height: 100%;
  float: left;
  width: 50%;
  background-image: url(https://staging.revo.com/images/green-water-intro.jpg);
}

#main-container {
  height: 400px;
}