title: How to make a background Image span the entire div and zoom in, in react.js?
body: <p><a href="https://i.stack.imgur.com/CJpGZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CJpGZ.png" alt="Example Here" /></a></p>
  <p>As shown in the example, I want the background image for a div to be a zoomed in version of the image and then display the image on top of that.</p>
  <p><a href="https://i.stack.imgur.com/Ek2rw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ek2rw.png" alt="This is what I have." /></a></p>
  <p>My Code:</p>
  <pre><code>&lt;div
        className=&quot;movie-details&quot;
        style={{
          backgroundImage: &quot;url(&quot; + movieImg + &quot;)&quot;,
          backgroundColor: &quot;black&quot;,
          backgroundRepeat: &quot;no-repeat&quot;,
        }}
      &gt;
        &lt;img
          src={movieImg}
          style={{
            height: &quot;100%&quot;,
            width: &quot;300px&quot;,
          }}
        &gt;&lt;/img&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.movie-details {
    width: 90%;
    height: 355px;
  }
  
  .movie-details img {
    margin: auto;
    display: block;
    padding-bottom: 30px;
  }
  </code></pre>
  <p>I have given the div a black background to depict the width of the div.</p>