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

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.

This is opaque div. This is opaque div. This is opaque div. This is opaque div. This is opaque div. This is opaque div. This is opaque div.

This is opaque div. This is opaque div. This is opaque div. This is opaque div. This is opaque div. This is opaque div. This is opaque div.

This is opaque div. This is opaque div. This is opaque div. This is opaque div. This is opaque div. This is opaque div. This is opaque div.

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; position:absolute; top:450px; left:110px; }

Points to note:

*You do need to absolutely position the transparent div over the opaque one.

*filter: alpha(opacity=55); This one works in IE. The number 55 implies 55% of opacity. You may want to adjust this number depending on the amount of transparency desired.

*-moz-opacity: .55; This one works in FireFox. The number 55 implies 55% of opacity. Once again, 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 you do, please let me know.

52 thoughts on “How to Make the Background of a Div Semi-Transparent?”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.