Trying to induce a background blur over a portion of an image without affecting the text overlaying it
firstly, I'm a UI/UX designer, please excuse me for my poor CSS/HTML. I'm trying to introduce a background blur under some text which is on an image. Currently the div is set to a slightly transparent red colour which creates this overlay. This is wordpress based and as such I'm trying to figure out a way to do this via CSS by inspecting the site in Chrome
Please look at the photos and descriptions for better understanding into what I am trying to do.
First image is the current situation Second image (4) is the desired situation
Unfortunately my reputation isn't high enough to display more
So based on what the user colonelsanders has commented, I was able to introduce a new div and blur the background!
Thanks everyone and sorry for the poor post
You don't give any code so I'll have to guess.
If your main background is fixed, then you can add an extra element ( we'll call it "cover" ) in the element that you want the blurred background ( we'll call it "blur" ), stretch the "cover" to fill the "blur's" width and height, set the main background to the "cover" with fixed position, and use the blur filter on it.