How to Make the Background of a Div Semi-Transparent?

By Shruti Gupta
October 18, 2005

If you look below, the light gray div over the darker one is transparent. As a result, the content inside the darker gray div shows up through the light gray div over it. This capability can enable us to create really attractive designs. It's really simple to do it. If you are interested, just read along.

Step 1:

In the HTML code, give a unique ID to the div with transparent background such as below:

<div id="transparency"></div>

Step 2:

In the stylesheet, define the style for this ID such as below:

#transparency {filter: alpha(opacity=55); -moz-opacity: .55; background-color:#EEE;}

filter: alpha(opacity=55); This one works in IE. The number 55 implies 55% of opacity.

-moz-opacity: .55; This one works in FireFox. The number 55 implies 55% of opacity. You may want to adjust this number depending on the amount of transparency desired.

I've no clue how to make it work in Safari and Opera. If someone knows, please let us know.