title: Div background image not shrinking to fit despite using "background-size: cover"
body: <p>Here's the original image (2880 x 900):
  <a href="https://i.stack.imgur.com/rf8Wg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rf8Wg.jpg" alt="enter image description here"></a></p>
  
  <p>And here's how it appears on the rendered page (1280 x 500):
  <a href="https://i.stack.imgur.com/ZN6oD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZN6oD.jpg" alt="enter image description here"></a></p>
  
  <p>1280 x 500 is the dimension of the <code>&lt;div&gt;</code> that contains the image as its background. If you notice, the rendered background is getting cropped instead of shrinking to fit inside the div which is smaller than the original image. My understanding is that a <code>background-size: cover</code> is meant to scale the image up or down without cropping. Why is it not working?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="page-header-div"&gt;
      &lt;div class="page-header-div-image-blog" style="background: url(&lt;?php echo $bannerurl ?&gt;) no-repeat;"&gt;&lt;/div&gt;
      &lt;div class="downarrow text-center downarrow1" onclick="scrollPage(this);"&gt;&lt;i class="fa fa-chevron-down"&gt;&lt;/i&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.page-header-div { position: relative; }
  .page-header-div-image-blog {
    background-size: cover;
    height: 100%;
  }
  </code></pre>
  
  <p>The exact same markup on another page works just fine! The two pages have the exact same tags used for the snippet. Is there no way to fix this issue through CSS? If so, how can one go about doing it using JS (I would really want to avoid that if at all possible).</p>