Streaming live at 10am (PST)

Color overlay on section background?


#1

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


New feature: background color overlays
#2

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


#3

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


#4

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


#5

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


#6

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


#7

@rowan do you mind schooling the rest of us on how you made the backgrounds appear "diagonal"? smile


#8

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.


#9

Hey rowan

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


#10

Yes 100% made in webflow! no extra coding.


#11

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?


#12

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).


#13