CSS set background-image

Question

I'm working on a project where I need to place a background image and have it appear as shown on the attachment.

Here is what I tried but the code does not working as it was intended. The image appears as full rectangle instead of the half rectangle. Which CSS rule should I set to achieve desired output?

section{
    background-image: url("https://via.placeholder.com/300x100");
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover; 
}

<section>A section.</section>