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:

<script type="text/javascript">
$(function(){
    $('.modal') .css({'height': (($(window).height()))});
});
$(window).resize(function(){
    $('.modal') .css({'height': (($(window).height()))});
});
</script>

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.

Answer 2

I am not sure if this is what you mean, but an often seen blur-like effect is created by creating a full height, full width DIV-element with a background-color and opacity property set.

/* DIV-element with black background and 50% opacity set */
div.overlay {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity = 50); /* required for opacity to work in IE */
}

Since your page height can vary, you'd probably want to use Javascript to set the height for this element.