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.
Related posts:
- Conversion from HTML to XHTML At Ecommerce Partners.net, we (HTML Production Department) were producing html...
- How to Create Columns with Div’s? When I started using div's rather than table for web...
- How to Add Alternate StyleSheets? The concept of alternate stylesheets is exactly as the name...
Tags: CSS, HTML/XHTML, Website Development
A very good article i really gain something from here.
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
Very good article.. very informative and so simple… Really useful…
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!!
http://360.yahoo.com/profile-eqIrIIsmc684zi27NXzxZqb4LA–?cq=1 is my page. Thank you!
It works for Mozilla, but how can I make transparent div in internet explorer???
Article was really helpful. Did we find the varible for Safari and Opera. Immediate help is required here.
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;
}
–>
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.
its really nice. very simple but helpfull.
nice and is their is any way to get window size
Safari seems to respond to “opacity: x” where x is anything between .1 and 1; example: “opacity: .7″
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
It’s the background that will fade and not the text. As an example, look here: http://www.soxx.com/
Try it yourself.
Very good!
Simple and direct.
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.
im a beginner coder…like SERIOUSLY a newbie…and i dont get it…xD
….why dont i understand it? T_T
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.
thx for the div transparency tutorial. I read a little en found opera uses::
opacity:0.7;
Adios.
I don’t get it either T_T too many ‘/’s and *’s
Very good work…
I have a question:
How can I do to make a .jpeg or an image transparent in a DIV?
Someone can help me…
thks,
Paolo
thx mate! works for me, only small problem for google chrome
[...] I found a great article that makes it simple by applying to simple styles to your layer: http://www.shrutigupta.com [...]
Thanks for the tip. I’ve been looking for a simple css solution. This is the one !!!
Precise article and a very good website.
really liked this article.
Will have to check how well it works.
Was looking for it from long.
Awmah, thanks so much! I’ve been searching for something like this all over the web, yours is the only one that actually worked for me. Thank you so much! 8D
[...] Transparent background transparent background: How to make a Flash movie with a transparent background semi transparent div: How to Make the Background of a Div Semi-Transparent? Shruti Gupta Blog – Articles on Website … [...]
You can get transparency to work in IE (not IE 6 or earlier as they do not support transparency), Safari, Firefox, Google Chrome by simply putting opacity not -moz-opacity!
I’ve been looking for this, thank you soooo much!
style=”opacity:1;filter:alpha(opacity=100)”
style=”opacity:0.5;filter:alpha(opacity=50)”
style=”opacity:0;filter:alpha(opacity=0)”
this is the cross-browser way to do it. cheers!:D
its is not working in google chrome and Mozilla firefox
Thanks a lot. it was helpful
it is very good easy to use and very halpfull
i m agree with that
In order for the transparency to work in IE, you need to add a WIDTH to the div in your style tag. Then it will work.
The way to get Safri, opera etc to work is with this:
-khtml-opacity: .55;
Thanks for posting articles
the problem with this method is that the div won’t expand properly to accomodate added content.
if you just want a uniform transparent background, just use a small png image and repeat it, or repeat-x, y, etc..
That is the easiest way. use a png fix script for IE 6 is you care about that.
Hi,
new css code for opacity is:
#transparency {
filter: alpha(opacity=75);
opacity: 0.75;
}
That works on Mozilla, IE, Opera and Chrome.
PS: since the new version of Mozilla the css moz-opacity dont work!
Hi again.
that code works also for Safari. All test on Windows…
Hi…
It is really very good solution…
It helps me a lot.
Hi!
Just wanted to say thank you so much i always wanted to figure out how to do this.
Hiii!
just want to say awesome code.
Thank you so much. cheers
Thanks Shruthi,
This was what I came searching for!
thank u
A transparent png as the background of the div will work well.
set the visibility:hidden
Useful tip:
It can happen that you want to make the background of a small div semi-transparent, but then the pictures and text will be semi-transparent too. You don’t want that!
It’s better to create a semi-transparent background tile in Photoshop or something. Save as PNG. Then select the PNG file as a background for your div and select ‘repeat’ if necessary.
Voila, you’ve got a div with a nice semi-transparent background, in which you can place images and text, without those being semi-transparent.
my div style:
background-color:#FFEAFF;
*filter:alpha(opacity=90);
opacity:0.90;
-moz-opacity:0.90;
border:1px solid #FF0000;
its work perfectly, used in poringa.net
Thank you. It was awesome.