Background image to fill only half of div

Question

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:

<div class="card-wrap bg-img-3"><div class="card">
  <div class="top">
        <h2 class="white">Heading</h2>
   </div>    
</div></div>  



.bg-img-3:before {
            content: '';
            position: absolute;
            width: 9.4cm;
            height: 3cm;
            z-index: -1;
            background: url("./img/video.png");
        }

But using this technique I don't seem to able to add a background colour to the bottom half of the div.

How can I use a cropped background image and background colour on the same div?

Answer 1

You can use after to set background color if you want

.bg-img-3:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -2;
    background-color: #f00;
}

Answer 2

If you call the background property alone, you will generalize your command. Instead, be more specific and use background-image. This will tell the browser you'll want to use various properties for your background. You may want to remove the pseudo element ":after" as I believe it is not required in this method. Try the following in your style:

.bg-img-3 {
            content: '';
            position: absolute;
            width: 9.4cm;
            height: 3cm;
            background-image: url("./img/video.png");
            background-repeat: no-repeat;
            background-size: 9.4cm 1.5cm;
            background-color: #999;

        }

Please let me know if this helps. Cheers.