title: Background image to fill only half of div
body: <p>I have a div with a set size which I need to add a background image to. However I would like the image to fill the width of the div but be cropped to take up up say one third to a half of the height of the div. I've managed this using a pseudo element like so:</p>
  
  <pre><code>&lt;div class="card-wrap bg-img-3"&gt;&lt;div class="card"&gt;
    &lt;div class="top"&gt;
          &lt;h2 class="white"&gt;Heading&lt;/h2&gt;
     &lt;/div&gt;    
  &lt;/div&gt;&lt;/div&gt;  
  
  
  
  .bg-img-3:before {
              content: '';
              position: absolute;
              width: 9.4cm;
              height: 3cm;
              z-index: -1;
              background: url("./img/video.png");
          }
  </code></pre>
  
  <p>But using this technique I don't seem to able to add a background colour to the bottom half of the div.</p>
  
  <p>How can I use a cropped background image and background colour on the same div?</p>