Streaming live at 10am (PST)

Color overlay on section background?

Hey guys,

This might be a stupid question and I bet I’m just missing something. I want to overlay a semi transparent color onto the background of a section. The blue section on this site is an example. http://snowballsummit.webflow.com Do I need to prep an image with this color overlay in photoshop to add it? I am planning on using the same image and having different color overlays for each section if possible. When I go and add fill, it fills behind the background image. Is there a way to fill above the background image?

Thanks,
Dave

1 Like

You could make the section/div that holds your background image position: relative… Then add another section/div right below that in the navigator… position that div absolute, then add the semi-transparent color/gradient overlay… set it to “Full” if you want it to auto fill the entire section, otherwise adjust size via width/height/etc + pin to wherever within that div that you would like…

Absolute positioning inside relative positioning…

Good Luck :wink:

1 Like

Body with background image fixed and two sections with transparency and color eg. rgba(255,0,0,0.5)

Hey guys,

So apparently, there is no simple way to do this without basically hacking it huh? Well I found a different option, just using a gradient overlay with transparency with the same color on both ends. I didn’t want anything where I had to overlay sections so this works.

Thanks for the help though.

And Bartosz, I may have some advanced questions for you as I get further into this site build so keep an eye out for an email in the next week or so.

Dave

2 Likes

I also just use gradient overlays most of the time…
Example: http://zombidemos.webflow.com/demo-3

Just doesn’t work in older IE versions, but I don’t care :blush:

3 Likes

Woah, @rowan, that demo site is purely amazing! Mind if I tweet something about it?

@rowan do you mind schooling the rest of us on how you made the backgrounds appear “diagonal”? :slight_smile:

Thanks. No need to ask. You can share them :smile:

@LaurentCardinal Actually it was just a first test… I have to come up with a “cleaner method” of achieving it… Give me some time to come back at it.

2 Likes

Hey rowan

Wow ! Pretty amazing demos
were the 10 pages made in webflow ???

Yes 100% made in webflow! no extra coding.

3 Likes

using a png with transparent sections in a diagonal pattern would work to get that diagonal effect pretty easily. Is that how you did it?

No. In short the “stripe” is a section, rotated 2 or 3 degrees and slightly scaled (1.04 or something), containing a Background image and gradient overlay. On top of that is a container with content (text, images).