I'm currently working on achieving a specific design effect where the background image fills the entire width of its parent div while being positioned in the top left corner relative to the image size, which is set at 600x375. The challenge lies in maintaining the desired visual impact with content overlaying on top of this background image. I have experimented with the background-size property, but encountered issues as it covers the whole div instead of the intended area. My goal is to keep the red background-color intact and have the background image occupy only half of the parent div depending on the size of the image.
After trying various approaches, such as adjusting the width and height attributes within the :after property, I found that they did not produce the desired outcome. Can someone suggest a proper technique to resize and stretch the background-image across the designated area without covering the entire parent div?
Link to the code snippet: 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... mollit anim id est laborum.</p>
<span>Lorem ipsum... 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>