Stretch background-image of parent to pseudo elements? - html

Question

I'm trying to make the background-image of a parent stretched to a pseudo element.
I'm currently using the code below and it works in a sense that it's using the same image but the placement is not correct (see screenshot). I'd like this to be seamless.
.parent {
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.parent::after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
width: 100%;
height: 15px;
background: inherit;
z-index: 1;
}
Setting the parent's background-attachement to fixed seems to make it work but then I get an unwanted parallax effect on the parent.
Is there a way to make this work in a way that allows me to stretch the background image but avoid parallax? All help much appreciated!

Answer 1

Make the pseudo element cover the whole element and only its background will be visible:
.parent {
position: relative;
background-image:url(https://picsum.photos/id/1018/800/800);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position:relative;
z-index:0;
height:100px;
}
.parent::after {
content: '';
position: absolute;
z-index:-1;
bottom: -15px;
left: 0;
width: 100%;
top:0;
background: inherit;
z-index: -1;
}
<div class="parent">
</div>