Blur effect on the entire webpage

Question

I want that the unregistered users on my website, see the entire website\'s pages with a blur effect.

How can I create this blur effect with css ?

Answer 1

Create a new div tag with id="body_bag" and put your rest of the site edits within that div and use following css to give the blur effect.

#body_bag {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity = 50); /* required for opacity to work in IE */
}