Kevin Powell - Community•3w ago

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;
    }
  }

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?

2 Replies

EIO•3w ago

Your z-index: -1 in the ::before is most likely the problem. Assuming the block-image is a child of the flynt-component, you could just use ::after without touching the z-index and your issue should be solved

Chrislizardc•3w ago

Block image is a flynt componenet itself but i can put an :after in the block-image and make it work yes you have a pretty good point. Thanks!

Gaming

Programming

Dealing with pseudo elements and background color