Archived topic
Backround Color Overlay
6 replies · Started by Scott on January 1, 2021
I'm new to Generate Press and Generate Blocks. Thanks for all the great tutorials and info I've found. I have a question about using background overlay.
I've added a Container and set the background image. I don't see/have an option for "Background Color Overlay" under the image in settings to use with Gradient. When I add more opacity to the image the the gradient does show better, so maybe it is working without clicking on an option. The photo is full color. The gradient colors are white and black. I also set the background color to white.
Thanks.
Scott
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Thanks Leo, I'm using a staging area. And this is a page I've been practicing with GB. which I'll make my home page when Its done.
Its the top image below header. I'm not necessarily going to keep this image but wanted to play around with it.
I copied the link in the private field.
Thanks!
Hi Scott,
I can't see the link you provided since it's a preview link.
But try to choose Pseudo Element instead of Element as the selector in both Background Gradient and Background Image as the screenshot below shows.
https://tinyurl.com/y7melld2
Let me know :)
Thank you Ying and Leo.
I think I figu8red everything out last night and it all seems to work very well. And I used this Pseudo Element option. I had seen one of Mike's tutorials on YouTube which had the "Background Color Overlay" and since mine didn't, that was why I was questioning, but everything works fine, so I'm guessing the options changed a little but still works the same way. I really like how my image came out, and am learning a lot. I wasn't sure if it could be viewed since its in staging but I should be switching to my main site soon.
Thanks very much!
I'm very happy to have found GP,GB and this support!
Scott
You are welcome Scott :)
We're glad to help!
Hello,
I have a similar request for a background image and color overlay that should replicate exactly this with GenerateBlocks: https://thefashionglobe.com/
There's an image map in the background and a color overlay plus some CSS filter.
Color: #181818;
opacity: 0.97;
filter: brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate(
0deg
);
I'm not yet familiar with GenerateBlocks. I don't understand how to set up all this with the pseudo element. I can see only an option to change the image opacity. Thanks in advance!!
