2 replies

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?

KP-C

Kevin Powell - Community•2y ago•

2 replies

Chrislizardc

Dealing with pseudo elements and background color

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

Dealing with pseudo elements and background color

Similar Threads

Dealing with pseudo elements and background color

Similar Threads

Similar Threads

Similar Threads