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

Answers


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.


Need Your Help

Rails number of weeks in month

ruby-on-rails-3 date

How can I in rails calculate the number of weeks in a given month?

Rails redirections with new users and logins

ruby-on-rails redirect routing controllers

So I'm trying to get the user to return to the page they were looking at before they click "log in"