Unfixed/dynamic div shall blur the background image behind it
At my new website project I have a fullpage background image. Over this, there is a dynamic div. This div shall blur the background image. So that just behind the div, the background image is blurred. I've just found some solutions on the internet with fixed positions and something like that. But that's something I want to avoid, beacause it's a full dynamic and responsive site.
And the backdrop-filter I wan't to avoid aswell, because it is alsmot not supported. But I don't care about the older IE and so on. If it works in modern browsers it's ok.
In short: unfixed/dynamic div shall blur the background image behind it.
I know, that a lot of people asked related questions, but they are all old and so are the answers. I've searched the half internet on this questions, but couldn't find a modern/dynamic answer. I can't believe that there isn't a jquery trick or something like that, that does the job.
I'm realy grateful for every helpful answer!
To make it more clear I added a picture. The DIV in this case is dynamic.
With this great tutorial and some changings in the CSS I did it:
http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/
And its all CSS only!
- How to remove "chrome is being controlled by automated test software" selenium javascript
- How to add text to a pop up window in Javascript?
- Using addEventListener and getElementsByClassName to pass an element id
- 'getDoc' is not exported from 'firebase/firestore'
- Find all elements with an 'id' attribute on the DOM
- I have a button that increment a counter when users click on it, but I want to delay the updating process if users click really fast
- rendering dropdown dynamically vue.js
- XForms Refresh not working? (XSLTForms 1.7)
- Why won't a simple image load in Phaser in the browser?
- Counting cells with a specific class in JavaScript
- How to join / combine two arrays to concatenate into one array?
- Execution order of GS files in a Project
- TypeScript Type-safe Omit Function
- how can i change html input to change to decimal when pressing comma while typing
- HTML5 enable Previous/Next track when playing Video/Audio
- Is there a way to get the JSX/TSX of a React component from the code itself?
- Imitate webserver for tests with Jest
- Check if IndexedDB database exists
- How do you mix the conditional operator ( ? : ) and deconstructed function returns?
- Use API to autofill form options?
- Display JavaScript Fetch for JsonResponse 2 Tables on HTML
- How to count number of social shares on web page locally
- How do I fix CORS issue in Fetch API
- Firebase Cloud Functions: Difference between onRequest and onCall
- Model.create is not a function - strapi
- Button in a table cell to open a modal dialog
- File API - Blob to JSON
- How to check if a variable is a blob in JavaScript
- Where to save a JWT in a browser-based application and how to use it
- React Native <Modal /> onDismiss not invoked