Adding an Overlay on a slide

Apologies if this has been asked already - but I couldn’t find the answer to this.

I’m useing the slider block and set an image as a background of an individual slide, and it’s got my header, paragraph and button in it. I then go ahead and add an overlay and the preview in the block editor looks like I want it to like this (left) but it ends up looking like this (right) :

What am I doing incorrectly?

My goal is to add a black overlay on the image and set it to about 50% opacity so the elements on top of the image can be viewed with decent contrast.

Hi @toyamacontrols,

Sorry to hear you’re experiencing trouble with this.

This is happening because the blocks wrapped in your slide don’t have a position set on the frontend, as on the backend Gutenberg adds a relative position to blocks.

When using overlays it’s important to remember to set the parent’s position to relative.

So to avoid this, I would suggest wrapping your blocks in a div block and setting a relative position from the Design > Layout > Position tabs.

Please let me know if this helps!

Worked perfect as always - thanks @Araminta!

1 Like