Background image to fill only half of div - html

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.