Hi!

I am designing my landing page. I want it to have 7 vertically stacked containers that each completely fill the desktop screen. Each container has a different background image with very vivid colors. I am overlaying text in middle of each container. The text is difficult to read and doesn't grab the user's attention because the images are vivid.

I want the images (the background) to blur when that single container fills the entire screen (the screen is not shared between two containers) so the user can easily read the text and isn't distracted. Otherwise, I want the background images to be clear.

 
I attempted to use Elementor's built-in background blurring based on viewport, but it doesn't work. The support team said this isn't possible without custom CSS (I have the lite version).

 
Is it possible to add a widget that achieves this? A widget that fills the entire screen with a background image and has different effects (like blurring) based on scrolling and viewport. Please let me know. Thank you!

Best,

Jonah