将父元素的背景图像拉伸到伪元素？

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>