Over a million developers have joined DZone.

Darkening A Page With CSS

// description of your code here

Add this to your css file or inside your “head� tags:

.darkenBackground {
background-color: rgb(0, 0, 0);
opacity: 0.7; /* Safari, Opera */
-moz-opacity:0.70: /* FireFox */
filter: alpha(opacity=70); /* IE */
z-index: 20;
height: 100%;
width: 100%;
top: 0px;
left: 0px;

Basically, this says set a style in CSS to have a black background, 70% transparent, filling the entire screen.

We then add this code anywhere inside our “body� tag:

This places our black box on the screen, and then the javascript hides it. We can then show it later on by putting this javascript in an event handler like onclick: document.getElementsById(�darkBackgroundLayer�).style.display = “�;

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}