Add overlay to parallax image in sections

Hi,

How can I add an overlay image (e.g. like in Welcome screen) to the parallax image in a definite section: e.g. “Call to action section”?

Hi,

Please post a link to your website, so we can check.

Best Regards,
Csaba

Hi,

here’s the link: http://bruderspielzeug.com/go/moesia-lp-test/

I need to put the following overlay on the image:
http://bruderspielzeug.com/go/dot-overlay/

Hello @bimmer

Here is the css code to make the section has overlay background image:

div#pg-2040-0::before {
    background: url(http://spinnersdigital.com/wp-content/uploads/overlay-dot.png);
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
}

From the code above, I take the sample by getting the row id from “service section” >> pg-2040-0 http://prntscr.com/9fxq95

Hi, Csaba,

I applied your code, but it put the overlay on all sections beginning from “our clients” section till the end of the page.

But I need that overlay aplied only to one single “call to action” section located between “our services” and “our clients”: http://prntscr.com/9fyfsa

Hi @bimmer,

Sorry, please try this code instead:

div#pgc-2040-1-0::before {
    content: '';
    background: url(http://spinnersdigital.com/wp-content/uploads/overlay-dot.png);
    width: 100%;
    height: 100%;
    position: absolute;
}

I have applied your new code, but regrettably it has not worked as I needed.

The overlay disappeared completely.