Streaming live at 10am (PST)

Add image but can't get an overlay over the image


#1

When I add a image and want to put a color overlay it doesn't work.

It only works if I put a div block then I select an image and color in the backgrounds panel.

On webflow.com it clearly examples add a image then go to background to add an overlay. This does not work for me WTF!? can anyone help me ?


#2

Hi @wildcatwilly Could you please update your post with some more information so we can help you faster?

Which video tutorial are you referring to?

Typically an overlay is applied to a div with a background image (as an "overlay" or gradient is a background-image property and not an overlay per say). Another approach is to add a parent div block with position set to relative (or absolute/fixed as necessary), with an inline image in that div block and then another div block which has a higher z-index and absolute positioning that has the overlay style applied to it but that would be 3 elements instead of one one element.

Things like your read-only link & screenshots really helps us to help you faster.

How to share a read-only link:

Thanks in advance!


#3

Overlays or multiple backgrouds can be added to boxes elements: div, containers, sections etc. An image is just and image, no CSS possibility to add an overlay or layer backgrounds.

To do what you need to do, 2 ways:

make a div box, set dimensions, add image as background and add overlay

or

make a box, add an image inside add another box inside the first box, set it to position absolute so it's over the image, add overlay as backgrounds


#4

That's what I'm looking for!! Thank you for helping me out.

Cheers :slight_smile:


#5

Vincent just helped me out! Thank you for the help!


#6

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