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

October 31st, 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.

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:

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.

This entry is filed under Website Development, HTML, XHTML, CSS. You can follow any responses to this entry through the RSS 2.0 feed. If you wish, you can leave a response.

19 Responses to “How to Make the Background of a Div Semi-Transparent?”

janbfe Says:
May 18th, 2006 at 4:52 am
A very good article i really gain something from here.
dalinar Says:
September 1st, 2006 at 3:10 pm
informative, and to-the-point. Instructions basic and simple enough for a beggining coder.

One thing to add for those beginners though:
you can put *- filter:alpha(opacity=55); -* into any style block, cascading, or inline.
*- Works Fine -*

*~- Tony
Sarfaras Says:
February 12th, 2007 at 9:29 am
Very good article.. very informative and so simple… Really useful…
minky Says:
March 24th, 2007 at 12:09 am
Hi… this is my page on Yahoo360! I want to make my module background opaque light gray like the blast background above(so that the background image shows through) but I don´t know how. I can only make it transparent as you see. Could you please help me? Thanks much!!
minky Says:
March 24th, 2007 at 12:12 am
http://360.yahoo.com/profile-eqIrIIsmc684zi27NXzxZqb4LA–?cq=1 is my page. Thank you!
Someone Says:
June 1st, 2007 at 6:58 pm
It works for Mozilla, but how can I make transparent div in internet explorer???
Rajiv Ranjan Says:
November 21st, 2007 at 9:11 am
Article was really helpful. Did we find the varible for Safari and Opera. Immediate help is required here.
Rajiv Ranjan Says:
November 21st, 2007 at 9:37 am
One quick question here. Can we have the following structure.

where div_Label is 10% transparent and div_Img 88% transparent. If yes then how following is the style setting I made.

div#div_Label{

background-color:#345671;
color:#ffffff;
width:300px;
height:200px;
position:relative;
left:20px;
top:20px;
filter: alpha(opacity=44);
-moz-opacity: .44;

}

div#div_Img{
filter: alpha(opacity=99);
-moz-opacity: .99;
width:150px;
height:100px;
position:relative;
left:20px;
top:20px;

}
Rajiv Ranjan Says:
November 21st, 2007 at 9:37 am
–>
Rajiv Ranjan Says:
November 21st, 2007 at 9:39 am
div id=div_Label
div id=div_Img
img src………
div
div

I guess wordpress here does not allow HTML tags so writing the above code.
Arif Says:
January 12th, 2008 at 6:14 am
its really nice. very simple but helpfull.
nidhin Says:
January 21st, 2008 at 5:53 am
nice and is their is any way to get window size
joey Says:
February 12th, 2008 at 2:40 am
Safari seems to respond to “opacity: x” where x is anything between .1 and 1; example: “opacity: .7″
Rakesh Says:
March 8th, 2008 at 6:10 pm
Hi!

Its nice to have the fade over the text but what if you want just the background of the div to fade but not the text?

Ideally i want ot write as much content as i like and the div will scroll according to whatever is typed but the fade will continue to fade ni the background …

possible??

Thanks

Rakesh
Shruti Says:
March 10th, 2008 at 1:28 pm
It’s the background that will fade and not the text. As an example, look here: http://www.soxx.com/
Try it yourself.
Breno Lewroy Says:
April 8th, 2008 at 3:01 pm
Very good!
Simple and direct.
Chris Says:
June 12th, 2008 at 6:14 pm
I would also like to know how to make the text non-translucent while making the container div translucent. The example makes them *both* translucent. Shruti is wrong.
gaby Says:
June 14th, 2008 at 3:20 am
im a beginner coder…like SERIOUSLY a newbie…and i dont get it…xD ….why dont i understand it? T_T
pumpkinskull Says:
June 17th, 2008 at 8:39 pm
using all three variables, filter:alpha(opacity=##) and -moz-opacity:.## and opacity:.## works for pretty much everything, I believe.

To make the text non-transparent, simply put the text in another div atop of the first one, this div having no background variable at all. gets messy, you’ll need to use positioning, but it works.