[Resolved] Background Image + Color Overlay

[hichb]

Hello,

I have a 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!!

[Leo]

Hi there,

Perhaps this section of the video would help:

[hichb]

Hi Leo,

Thanks for your reply!
I learned to apply the background overlay however as you can see here: https://wordpress-273320-2007441.cloudwaysapps.com/new-page I’m a bit far from the expected results.
There are two components I need help with:

1- How to make the image appears smaller right at the center as the live link I posted. Should I adjust the space in the first container or add another container within the grid?

2- How to apply the CSS filter I mentioned above to the background image?

Thank you!

[Ying]

Hi Hich,

1. Select the very outside container, set its vertical alignment to center.

2. For the filter, you can try this:

.gb-container-7efda87a:before {
    filter: brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 
0deg
 );

[hichb]

Ola Ying!

Thanks for the tips, but I wasn’t able to apply the CSS filter and vertical alignment is set to center.
The image is still huge. I selected the block container and set the vertical alignement to center but it only center the content.
I use Simple CSS and added the code there, nothing changed.

If you take a look to the live site, the background image is contained. The live site is built with elementor.

I might be missing something!

[Ying]

Sorry I misunderstood your 1st question, so your current background image size is set to cover, you just need to change it to a value, eg. 800px or 50%.

I don’t see a background image in the live site, is there a specific page I should be looking at?

Let me know 🙂

Update: I see the image now, the opacity is very low, so I couldn’t really see it before.

[hichb]

Yes, here’s the page: https://thefashionglobe.com/ Desktop (not mobile) you can see the map in the background and CSS filter..
Update: In the live version, the opacity is set to 0.97 and I think there is a CSS filter.

For the size: Got it!

[Ying]

The filter CSS should work, but for the same result as the live site, you’ll need to lower your background image opacity, this structure is a little bit different from the elementor structure.
https://www.screencast.com/t/BU78AfVjYZx

Since GB has the opacityoption, it’s better to use this option instead of using CSS.

[hichb]

I’ve lowered the opacity to 0.1 here: https://wordpress-273320-2007441.cloudwaysapps.com/new-page still trying to figure out how to apply the CSS filter..

Update: All right. Makes sense! I didn’t apply the filter only the opacity I might be close to get the results..

[Ying]

The filter value might need to be adjusted as well, eg. lower the brightness.

But I think you might not need the filter, just by keep lowering the opacity to 0.04 should give you a very close look to the live site 🙂

[hichb]

Yes indeed! I will mark this as resolved! Awesome. Thanks a lot for your help Ying. 🙂
The next question is related to the custom font to make it display on the generateblocks, this looks like it was already addressed in the Forum..

[Ying]

Glad to hear that 🙂

For the new question, could you open a new topic in Generateblocks support forum?

Free version: https://wordpress.org/support/

Pro version: https://generateblocks.com/support/

And here’s a GB community forum, you might be able to find the answer: https://community.generateblocks.com/

[Author]

Posts