...

View Full Version : Can't do background transparency on DIV..



oliver111
09-11-2007, 08:53 PM
Now the question is, how do i get the background colour to be 45% transparent as i have another background inplace.

#content {
padding:0px 5px 5px 5px;
border-left:solid 1px #FFFFFF;
border-right:solid 1px #FFFFFF;
border-bottom:solid 1px #FFFFFF;
margin:0 auto;
text-align:center;
width:623px;
height:auto;
background-color:#000000;

}

Now the question is, how do i

oliver111
09-11-2007, 09:06 PM
Another thing too, i don't want the text to be transparent just the background.

eak
09-11-2007, 09:07 PM
#content {
padding:0px 5px 5px 5px;
border-width:0 1px 1px 1px;
border-style:solid;
border-color:#FFF;
margin:0 auto;
text-align:center;
width:623px;
height:auto;
background-color:#000000;
opacity:.45;
}

until rgba color is widely supported, you will have to overlay a div on top of your semi-transparent background to have non-transparent text.
Or, you can use a png image with alpha transparency for your semi-transparent background.

oliver111
09-11-2007, 09:14 PM
Thanks but i can't overlay for some reason, z-index won't do it properly and the position seems to place it off the design.

oliver111
09-11-2007, 09:30 PM
It seems css has been really crap then, is there not back-ground-color-opacity or anything like that? I tried overlaying the div but it doesn't work the text still goes in with the transparncy.

eak
09-11-2007, 09:40 PM
back-ground-color-opacity doesn't exist.

What does exist is rgba() in css3 (see http://www.w3.org/TR/css3-color/).
rgba takes 4 arguments: red, green, blue, and alpha (transparency #).

For now, I would go with a semi-transparent png background image to get the effect you want. It will not work in IE6 unless you use some hacks. Every other browser can render png's just fine.

oliver111
09-11-2007, 09:42 PM
I can't go with images, because the heigths and widths are automatic for the many pages on the website.

eak
09-11-2007, 09:47 PM
Do you have an example online somewhere?

What have you done so far?

see http://css.dev.ericking.us/ for a quick example I made.

oliver111
09-11-2007, 10:17 PM
How did you get the background like that everytime i try that i get horrid pixles in the transparncy i worked out how to get the background on just getting the img right. I use Cs2 abobe btw, thanks for the help btw.

rmedek
09-11-2007, 10:33 PM
Oliver, please check your Private Messages.

eak
09-11-2007, 10:47 PM
The background is a black 1x1 pixel image with the layer opacity dropped down.
Save for web as a PNG-24, not gif.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum