Full Page Blur in CSS

Question

How can I blur a whole page using CSS? Other elements such as images are allowed.

Answer 1

On the height 100% question, there is no CSS solution, even in CSS3, but there is a JQuery way of doing it. If the element is #modal, define all other properties in the CSS file and do not even mention the height property in the CSS. Then put the following JQuery code in your HTML as follows:

This requires JQuery of course, and may cause issues if the content is taller than the viewport. As to the ability to blur the contents behind it dynamically, that's something I'd love to know.