SOLVED: Background image overlay issue

Bricks Version: 1.5.2
Browser: Microsoft Edge 105.0.1343.3, Chrome Version 105.0.5195.102
OS: Windows
URL: https://bricks-layouts.duogeeks.com/bricks-insurance-layout

Background image overlay is now working properly. It was fine until I updated Bricks to 1.5.2

1 Like

Can confirm this, same on my pages!

Hi Imran,
Thanks so much for your report!

From which version did you update to Bricks 1.5.2? Probably from 1.5, right?
Please read the Bricks 1.5.1 Changelog and especially the “breaking change” paragraph:

The key point is that we have removed position: relative from almost all elements. Accordingly, some things behave differently than before, although this is not a bug but standard and expected HTML/CSS behavior.

The solution is relatively simple: the section and the container need “position: relative” for the overlay to work as before. Alternative: section > position:relative, container > z-index: 1.

Best regards,
timmse

3 Likes

It works :smiley:

Thank you @timmse

1 Like

is there a solution for posts? I added an overlay on it but the featured image disappears. I don’t think z-index is the solution for this instance.

1 Like

+1 on this - currently experiencing the same issue on 1.5.2 regarding posts element with gradient/overlay activated on the featured images. Deactivating the overlay will restore the featured images.

section > position:relative & container > z-index: 1 solve the other overlay issues I’ve been experiencing, but not for this posts element I’m afraid. Overlay colors do have transparency.

Hi @adunturidas @baneshansley ,
Welcome to the forum and thanks for reaching out!

The posts element has a separate overlay setting. Make sure to enable “Overlay” within the field options as well :slight_smile:

Best regards,
timmse

2 Likes

oooh, that worked! although the featured image is now unclickable, still looking for a workaround.
gradient overlays would also be great in the future. Thanks!

image

image

:frowning:

Works like magic. Thank you for the explanation.

1 Like

If you remove the default link from the post title, the “link image” option works. Otherwise, you’d have a link inside of a link… which isn’t allowed.

Use {post_title} instead if {post_title:link}.

2 Likes