How to fill the width of a background image about half way with content overlaying on top?

Question

I'm trying to make the background-image fill the entire width of the parent div positioned in the top left corner relative to the image size (in this case 600x375) while keeping it at 100% width across the parent div as well. In addition to doing this, I have content overlaying on top of the background-image which is the intended effect. I tried background-size but that covers the whole div which I don't want. I want the background-color:red to remain the full background color of the parent div as it is now but have the background-image about half way depending on the image size. I also tried width and height attributes on the :after property but it seems to shifts the background-image around and not change the actual size of the image. What is the appropriate approach to making the background-image size fit and stretched across it but not covering the entire parent div.

Here's the jsfiddle: https://jsfiddle.net/TheAmazingKnight/6xgrftLj/4/

.container {
    z-index: 10;
    position: relative;
}
#parent {
    padding-top: 70px;
    padding-bottom: 35px;
    content: '';
    background-color: red;
    background-repeat: no-repeat;
    width: 100%;
    height: 500px;
    background-position-y: 50%;
    background-position-x: 50%;
    position: relative;
}
#parent:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position-y: 50%;
    background-position-x: 50%;
    background-image: url(https://via.placeholder.com/600x375);
    height: 675px;
    width: 900px;
}

<div id="parent">
        <div class="container" style="
    z-index: 10;
    position: relative;
">
            <h1>Heading 1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
            <h3>Lorem ipsum dolor</h3>
            <p><a href="#">Download</a></p>
        </div>
    </div>

Answer 1

I've written a solution for you. In my solution i didn't use the image as background. I used the image as a child element of the div(#parent) and positioned it as absolute. I made some changes in both of your html and css file. Hope it will help you.

.container {
    z-index: 10;
    position: relative;
}
#parent {
    position: relative;
    content: '';
    background-color: red;
    background-repeat: no-repeat;
    width: 100%;
    height: 500px;
    position: relative;
}

#parent img {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0; 
  width: 100%;
  height: 250px;
  object-fit: cover;
}

<div id="parent">
        <div class="container"
>
          <img src="https://via.placeholder.com/600x375" alt="">
            <h1>Heading 1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
            <h3>Lorem ipsum dolor</h3>
            <p><a href="#">Download</a></p>
        </div>
    </div>