Kevin Powell - CommunityKP-C
Kevin Powell - Community•16mo ago•
2 replies
Chrislizardc

Dealing with pseudo elements and background color

Hello,
I have an issue with one of my pseudo elements. I have a pseudo element of ::before which is a "wave image" (the wave image is part of the component with the Heading and paragraph you can see ) you can see it in the image. The CSS of this component is : 
flynt-component[name='BlockWysiwyg'] {
  background-color: var(--background-color);
  position: relative;
}

flynt-component[name='BlockWysiwyg']::before {
    background-image: var(--background-image);
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    inline-size: 100%;
    padding-block: 300px;
    padding-block-end: 200px;
    position: absolute;
    transform: translateY(-50%);
    z-index: -1;
  @media (max-width: 768px) {
      background-position: center;
      background-size: contain;
    }
  }

The image you see "infront" of this "blue-wave" is a different component which is called Block-image. If i give "block-image" a background-color of pink for example it will cover the whole before pseudo element.
My question is how can i make the pseudo element be above the background-color but behind the image?
image.png
image.png
Was this page helpful?