0 2 Votes

Darken Background of a Website (Gray Out Effect)

Tutorial by Axuter | 09/05/2012 at 23:18

In this tutorial, I will show you how to gray out a complete website, what is known as Grey Out Effect. This effect can be used, for example, to display images or anything else in the foreground while the entire background is darken.

The CSS

We are using the following CSS for all modern browsers:

#grayout {
   position: fixed;
   left: 0px;
   top: 0px;
   height: 100%;
   width: 100%;
   background-color: black;
   opacity: 0.5;
   z-index: 9999;
}

If we want this running also in old versions of Internet Explorer, for example, in version 6, we still need to add the following CSS rules:

#grayout {
   filter: alpha(opacity=50);
}
 
* html #grayout {
   position: absolute;
}

In newer versions of the Internet Explorer, also the CSS code above works, while "filter" is required for older versions. If you want to validate your CSS, however, you have to remember, that "filter" is not part of the CSS standard.

How dark should the background be?

How dark the background will be, has to be adjusted at "opacity: 0.5" respectively "alpha(opactiy=50). These numbers can be customized from 0 to 1 or from 0 to 100 in the way you want it.

The HTML

Finally, we still need the HTML. We only need the following line:

<div id="grayout" style="display: none;"></div>

It does not matter at which point you insert the line in your HTML document. You can also add the line later using jQuery. The "display: none" ensures, that the grayed-out area is not yet visible at the beginning. If you want to show the area immediately, of course, you can simply omit "display: none".

Gray out background dynamically

When we are using jQuery, we can gray out the background dynamically and can also show it again. For this, we use the following link:

<a href="#" onclick="$('#grayout').toggle(900); return false;">GrayOut</a>

If you click on this link "GrayOut", the darkened background of the page is displayed or hidden, depending on whether it is currently visible or not.

ReplyPositiveNegative

About the Author

Avatar AuthorThe author has not added a short description to his profile yet.
Show Profile | Message

 

Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own articles on askingbox.com. How to do.