Hello guys! I finally figured out how to apply tansparency in both IE and Firefox, but now I have another problem. I applied transparency to my background image, but the text is now transparent as well. Is there a way to apply the transparency to only background image, not the text?

Here's my CSS:

.navbar {
float: left;
width: 780px;
height: 30px;
background: url(images/bg.png) repeat;}

* html .navbar { 
display: block; 
background: url(images/bg.gif) repeat;
opacity: 0.5; 
-moz-opacity: 0.5; 
filter: alpha(opacity=50);} 

.menu * {
padding: 0;
margin: 0;}

.menu {
width: 780px;
padding: 0;
margin: 0;}

.menu li {
float: left;
display: inline;
padding-left: 10px;
list-style: none;}

.menu li a {
float: left;
display: inline;
font: bold 9pt Verdana, arial;
padding: 8px 0;
width: 100px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;}

* html .menu li a {
opacity: 1; 
-moz-opacity: 1;
filter: alpha(opacity=100);}

.menu li a:hover {
text-decoration: underline;
color: #DBDFEB;}

I added

opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);

to the links, but they're still half transparent.

Anyone has any ideas?

Thanks!

Opacity is not an option for the background image properties. What you need is to create the opacity in the PNG first, then use it. You're still going to need a workaround because IE 6 and below do not support PNG transparency and even with the available filters for IE, you cannot use transparency on a tiled image.

Thanks for your reply, but I don't quite understand what you mean. Could you please show me an example?

I mean the background works just fine in IE, but it makes the links transparent too. Is there a way to fix that?

Thanks

Everything is semi-transparent because you put the opacity filter on * html, so it applies it to EVERYTHING.

Do you have a URL so we can see it ?

No sorry it's not online yet.