Background Image + Color Overlay

Hi there,

Perhaps this section of the video would help:
https://youtu.be/w6rX3f9BX7c?t=95

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!

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

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!

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.

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!

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.

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

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

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

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/