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