Full Page Blur in CSS

Question

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

Answer 1

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.