# Help with html (semi transperent backgrounds)



## labdude (Dec 18, 2011)

Hey, this is my first post.
I am in school, and I am designing a website-style menu in a computers class. My computers teacher wants me to create a table with semi-transparent backgrounds and opaque text. any suggestions? i also need to know where to put the code within my current code. I'm sorry, I'm new here, but how do I put my coding in a iframe so that you can see it? thanks in advance


----------



## TechGuy (Feb 12, 1999)

You can post your code using the [ html ] and [ / html ] or just post a link if you have it up on a site already.

I think the CSS you're looking for is opacity. Maybe something like:

background-image: url(...); opacity: 0.5;


----------



## labdude (Dec 18, 2011)

thanks i will give it a try.
here is my code. sorry for the lack of indentations

```
Menu

[B][SIZE=15]Pauls Place of Pentasodium Triphosphate[/SIZE][/B]

[TABLE]
[TR]
[TH]Starters [URL=http://www.google.com].[/URL]
[/TH]
[/TR]
[TR]
[TD]Fish stick[/TD]
[TD]   [/TD]
[TD]$599.99[TD]
[TD]  [/TD]
[TD][IMG]fishstick.png[/IMG][/TD]
[/TR]
[TR]
[TD]One wonderfully preserved stick of mystery fish, fried in more perservatives, and served cold[/TD]
[/TR]
[TR]
```


----------



## labdude (Dec 18, 2011)

that is only the first bit of my code. If you need more, then just ask.


----------



## TechGuy (Feb 12, 1999)

I see you have a few transparencies already set up there, but they appear to be working... what exactly is it that is showing up differently than you expect?


----------



## ZWard (Sep 28, 2011)

TechGuy said:


> I see you have a few transparencies already set up there, but they appear to be working... what exactly is it that is showing up differently than you expect?


I don't have that happening, even in firefox. Could you post the remnants of the code? I would use the png work-around to do it.


----------



## labdude (Dec 18, 2011)

The transparencies are making everything-including the table text-semi transparent, however i only want the table backgrounds to be semi-transparent. any ideas?


----------



## labdude (Dec 18, 2011)

do you mean me?


----------



## labdude (Dec 18, 2011)

ZWard said:


> I don't have that happening, even in firefox. Could you post the remnants of the code? I would use the png work-around to do it.


do u mean me?*


----------



## TechGuy (Feb 12, 1999)

You might want to try something like this:

background-color:rgba(255,0,0,0.5);

(The last part being the opacity.)

Unfortunately, that's only supported with CSS3-compatible browsers... (modern versions of Safari, Firefox, Chrome, and IE9+)


----------



## labdude (Dec 18, 2011)

Unfortunately, it did not work. but just making sure, i put it under the table style, correct?


----------



## TechGuy (Feb 12, 1999)

Correct. So, in the example you provided, you would change your table line to read:


```
[TABLE]
```
This does work -- but, again, only in CSS3 browsers.


----------



## TechGuy (Feb 12, 1999)

Another option, as ZWard mentioned above, would be to set your background-image as a semi-transparent PNG. That would work in more browsers (though not IE6 as it doesn't support PNG transparencies.)


----------



## labdude (Dec 18, 2011)

It works thanks a lot


----------



## labdude (Dec 18, 2011)

one more thing- what do the other numbers stand for? I'm assuming the colour, correct?


----------



## TechGuy (Feb 12, 1999)

Yup.

Red (0-255), Green (0-255), Blue (0-255), Opacity (0-1)

Glad it worked!


----------



## labdude (Dec 18, 2011)

ok so i can edit that and fiddle around with the colour then? and is 225 225 225 white?


----------



## TechGuy (Feb 12, 1999)

Right

255,255,255 is white.
0,0,0 is black
200,200,200 is a gray.
255,0,0 is bright red.
0,255,0 is bright green.
0,0,255 is bright blue.

You can find a list of colors with their codes here, or you can play around on your own to mix something different. 

http://rapid-tools.net/online-color-picker/


----------



## labdude (Dec 18, 2011)

thanks i got a different shade of gold. it looks pretty good.


----------



## TechGuy (Feb 12, 1999)

Glad to hear it! Now you have to help out someone else with something you know more about than they do. 

Have a happy holiday!


----------



## labdude (Dec 18, 2011)

Merry Christmas!!


----------



## ZWard (Sep 28, 2011)

Sorry Guys, Left for vacation early, didn't have a laptop before, and now I do. Glad to here that you got it solved!


----------



## tomdkat (May 6, 2006)

labdude, if you search this forum for "transparent background", you should find a few threads which discuss how to do this, using CSS or images. Basically, if you set the opacity of an element, that opacity is applied to the elements contained within. Using some CSS "magic", you can overlay two elements on top of each other such that the background image is transparent yet the text isn't affected. Of course, using an image with transparency is the easier solution. Be aware, PNGs with transparency can get LARGE in file size. The larger the image file size, the longer it takes to download.

Peace...


----------

