Container: Dynamic background replaces pseudo element

I’m currently trying to create a container that has the featured image as a dynamic background to the container element. With a SVG background image on top of it by leveraging the :before pseudo element from the “Advanced” option of the containers “Backgrounds” options. However the CSS for the ::before pseudo element gets overwritten with the same background URL as the div.

This is the current DOM that gets made:

<div class="gb-container gb-container-60fb74d6">
  ::before
  <div class="gb-inside-container">
    <h1 class="gb-headline gb-headline-809bb013 gb-headline-text">Services</h1>
  </div>
</div>

This is the CSS that gets generated:

.gb-container-60fb74d6 {
    background-image: url(https://example.com/wp-content/uploads/2022/11/546321879.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.gb-container-60fb74d6:before {
    content: "";
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(https://example.com/wp-content/uploads/2022/11/546321879.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

The frontend shows this:


The editor shows this (this is also how it should be):

The options used.
advanced-backgroundimage

Hi @Envolutions,

For reference, can you provide the link to the site in question?

Hi,

Yes, afcourse. link

I see. Can you open a ticket here? We’ll try to assist you there further with regards to this GB Pro feature issue: Support - GenerateBlocks