Color overlay on collection images?

Community resources Bugs
1

Hi Webflowers,

I’m trying to add a color overlay to the top of a collection image within my Blog Template. Anyone have experience with this?

The problem I’m having is that choosing the BG image from by Blog Posts Collection overrides all overlays and gradients from the Style panel.

35 AM

Here is my read-only link:
https://preview.webflow.com/preview/trooper-mmg?preview=6e42c3bb752ca888018e924777b6fa92

Any help is greatly appreciated!

2

You could nest a div with a color overlay. If you mess with the opacity you could also assign the color of the overlay in your collection item.

1 Like
4

Hi @eroznowski thank you so much for posting this issue about dynamic background images and overlays.

​This is a known issue which we are working on surfacing better within the Designer experience.
​
​The current workaround is to:

  • Have the parent section pull in the background image set to cover and that section should be set to relative position

  • ​Then within that section, you should have a div block set to absolute positioning and cover 100% width and height of the section and a z-index of 0.

  • You can add an overlay/gradient style to this absolute positioned div block and set it to a z-index of 1 or greater

  • Then I typically recommend adding the container as a sibling element to the overlay element with relative positoning and give the container a z-index higher than the overlay element.

​Please let me know if this is helpful :bowing_man:

2 Likes
5

@Waldo

Thank you for the response! This helped me to get the title container above the overlay layer.

I am still unsure how to apply “cover” to my dynamic image.

46 PM

I have the image placed as a background (set to cover) here, though it is of course being overridden.

56 PM
56 PM472×990 66 KB

Am I missing something?

6

Hi @eroznowski my apologies for the delayed response here! Thankfully it’s a quick fix for that Hero section BG image!

Just delete the gradient overlay style associated with your sub banner blog template class.

Here’s a quick GIF showing the fix: Screen Recording 2017-11-16...

That extra background attachment style was causing the conflict.

Please let me know if you have any additional questions :bowing_man:

7

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.