# HTML Transparency

**URL:** <https://boards.straightdope.com/t/html-transparency/136693>\
**Category:** Factual Questions\
**Created:** [November 14, 2002, 7:41am UTC](https://boards.straightdope.com/t/html-transparency/136693 "2002-11-14T07:41:14Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Duderdude2](https://avatars.discourse-cdn.com/v4/letter/d/cdc98d/32.png) [@Duderdude2](https://boards.straightdope.com/u/Duderdude2)\
**Post date:** [November 14, 2002, 7:41am UTC](https://boards.straightdope.com/t/html-transparency/136693/1 "2002-11-14T07:41:14Z")

</div>

Is there a way to put an image as a background in a table, yet have it be slightly transparent (so the main page’s background will show through)? Thanks!

---

<div class="post-metadata">

**Author:** ![mazzer](https://avatars.discourse-cdn.com/v4/letter/m/eada6e/32.png) [@mazzer](https://boards.straightdope.com/u/mazzer)\
**Post date:** [November 14, 2002, 8:43am UTC](https://boards.straightdope.com/t/html-transparency/136693/2 "2002-11-14T08:43:05Z")

</div>

IE5 (or is it IE4) and above will obey alpha filters. In addition to your background=“img.gif”, give the table a class=“foo” and define .foo in your stylesheet as:

.foo { filter:alpha(opacity=X); }

where X is a number between 0 and 100, 100 being totally opaque.

It works best on GIFs; it will work on JPGs to a certain extent. You will see what I mean.

---

<div class="post-metadata">

**Author:** ![Duderdude2](https://avatars.discourse-cdn.com/v4/letter/d/cdc98d/32.png) [@Duderdude2](https://boards.straightdope.com/u/Duderdude2)\
**Post date:** [November 14, 2002, 10:20am UTC](https://boards.straightdope.com/t/html-transparency/136693/3 "2002-11-14T10:20:24Z")

</div>

> [@](#):
>
> \*Originally posted by chriszarate \*  
> \*\*IE5 (or is it IE4) and above will obey alpha filters. In addition to your background=“img.gif”, give the table a class=“foo” and define .foo in your stylesheet as:
> 
> .foo { filter:alpha(opacity=X); }
> 
> where X is a number between 0 and 100, 100 being totally opaque.
> 
> It works best on GIFs; it will work on JPGs to a certain extent. You will see what I mean. \*\*

Awesome, thanks…but how do I go about implementing that?

---

<div class="post-metadata">

**Author:** ![Liberal](https://avatars.discourse-cdn.com/v4/letter/l/848f3c/32.png) [@Liberal](https://boards.straightdope.com/u/Liberal)\
**Post date:** [November 14, 2002, 11:05am UTC](https://boards.straightdope.com/t/html-transparency/136693/4 "2002-11-14T11:05:32Z")

</div>

\<link rel=“stylesheet” href=“yourcssfile.css” type=“text/css”\>

---

<div class="post-metadata">

**Author:** ![Crusoe](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@Crusoe](https://boards.straightdope.com/u/Crusoe)\
**Post date:** [November 14, 2002, 11:11am UTC](https://boards.straightdope.com/t/html-transparency/136693/5 "2002-11-14T11:11:25Z")

</div>

To follow on from **Lib** , you need CSS information. You can do that as an external stylesheet (as above) or in the header section of the webpage. For the latter:

```auto

<head>
    <style type="text/css">
        .foo { filter:alpha(opacity=X); }
    </style>
</head>

```

And then in the table code:

```auto

<table class="foo" background="img.gif"> ... </table>

```

You can define any name for the class; “foo” is just an example.

---

<div class="post-metadata">

**Author:** ![Duderdude2](https://avatars.discourse-cdn.com/v4/letter/d/cdc98d/32.png) [@Duderdude2](https://boards.straightdope.com/u/Duderdude2)\
**Post date:** [November 14, 2002, 7:17pm UTC](https://boards.straightdope.com/t/html-transparency/136693/6 "2002-11-14T19:17:26Z")

</div>

Great, thanks everyone, but I encountered an interesting problem with this. Here is the webpage where I placed the code:

[http://www.nintendovision.com/order.htm](http://www.nintendovision.com/order.htm)

As you can see, the cells with the transparent background also made the text transparent, thus impossibile to read. How can I fix this? Thanks.

---

<div class="post-metadata">

**Author:** ![tanstaafl](https://avatars.discourse-cdn.com/v4/letter/t/ba8739/32.png) [@tanstaafl](https://boards.straightdope.com/u/tanstaafl)\
**Post date:** [November 14, 2002, 7:55pm UTC](https://boards.straightdope.com/t/html-transparency/136693/7 "2002-11-14T19:55:00Z")

</div>

Doesn’t look transparent to me. Of course, I’m using Opera, not IE.

What are you trying to accomplish? It looks as if you are trying to have different color backgrounds for alternating rows. Could you do the same thing just by setting BGCOLORs on your TR tags? For example:

```auto

<HEAD>
<TITLE>Test</TITLE>
</HEAD>
<BODY BGCOLOR=GRAY>
<CENTER>
<TABLE>
<TR BGCOLOR=BLACK>
<TD><FONT COLOR=WHITE>One Cell</FONT></TD>
</TR>
<TR BGCOLOR=WHITE>
<TD><FONT COLOR=BLACK>Two Cell</FONT></TD>
</TR>
<TR BGCOLOR=RED>
<TD><FONT COLOR=YELLOW>Red Cell</FONT></TD>
</TR>
<TR BGCOLOR=BLUE>
<TD><FONT COLOR=WHITE>Blue Cell</FONT></TD>
</TR>
</TABLE>
</CENTER>
</BODY>

```

---

<div class="post-metadata">

**Author:** ![Duderdude2](https://avatars.discourse-cdn.com/v4/letter/d/cdc98d/32.png) [@Duderdude2](https://boards.straightdope.com/u/Duderdude2)\
**Post date:** [November 14, 2002, 8:16pm UTC](https://boards.straightdope.com/t/html-transparency/136693/8 "2002-11-14T20:16:09Z")

</div>

That’s what I had before, but what I want is for every second column to be slightly transparent so the background will show through (you may not be able to see this because of your broswer). It looks just how I want it in I.E. except for the transparent text.

---

<div class="post-metadata">

**Author:** ![Achernar](https://avatars.discourse-cdn.com/v4/letter/a/e274bd/32.png) [@Achernar](https://boards.straightdope.com/u/Achernar)\
**Post date:** [November 14, 2002, 8:41pm UTC](https://boards.straightdope.com/t/html-transparency/136693/9 "2002-11-14T20:41:32Z")

</div>

W3C accomplishes something akin to what you want on [their CSS page](http://www.w3.org/Style/CSS/). [Here’s the style sheet that matters](http://www.w3.org/Style/banner-k.css). Notice the floating navigation bar in the upper-right. (If you can get it to work. I couldn’t, in Internet Explorer, but Mozilla shows it.)

Anyway, the trick is that they set a background image which is simply a PNG file with transparency turned on, in a sort of checkerboard of on and off pixels. As you can see, the text is still quite readable, so you may want to look into it.

---

<div class="post-metadata">

**Author:** ![Lord\_Jim](https://avatars.discourse-cdn.com/v4/letter/l/ecccb3/32.png) [@Lord\_Jim](https://boards.straightdope.com/u/Lord_Jim)\
**Post date:** [November 14, 2002, 10:42pm UTC](https://boards.straightdope.com/t/html-transparency/136693/10 "2002-11-14T22:42:32Z")

</div>

I don’t know if it matters, Duderdude2, but on your page using Netscape 7, I see no background image at all. The cells are grey with white text. IE 6 shows the image, but no text.

On the page that Achernar linked to, Netscape displays it fine while IE displays the floating navigation bar as opaque.

Have fun.  
Jim

---

<div class="post-metadata">

**Author:** ![Lord\_Jim](https://avatars.discourse-cdn.com/v4/letter/l/ecccb3/32.png) [@Lord\_Jim](https://boards.straightdope.com/u/Lord_Jim)\
**Post date:** [November 14, 2002, 10:47pm UTC](https://boards.straightdope.com/t/html-transparency/136693/11 "2002-11-14T22:47:39Z")

</div>

I don’t know if it matters, Duderdude2, but on your page using Netscape 7, I see no background image at all. The cells are grey with white text. IE 6 shows the image, but no text.

On the page that Achernar linked to, Netscape displays it fine while IE displays the floating navigation bar as opaque.

Have fun.  
Jim

---

<div class="post-metadata">

**Author:** ![Lord\_Jim](https://avatars.discourse-cdn.com/v4/letter/l/ecccb3/32.png) [@Lord\_Jim](https://boards.straightdope.com/u/Lord_Jim)\
**Post date:** [November 14, 2002, 10:53pm UTC](https://boards.straightdope.com/t/html-transparency/136693/12 "2002-11-14T22:53:04Z")

</div>

I don’t know if it matters, Duderdude2, but on your page using Netscape 7, I see no background image at all. The cells are grey with white text. IE 6 shows the image, but no text.

On the page that Achernar linked to, Netscape displays it fine while IE displays the floating navigation bar as opaque.

Have fun.  
Jim

---

<div class="post-metadata">

**Author:** ![black\_rabbit](https://avatars.discourse-cdn.com/v4/letter/b/f19dbf/32.png) [@black\_rabbit](https://boards.straightdope.com/u/black_rabbit)\
**Post date:** [November 14, 2002, 11:36pm UTC](https://boards.straightdope.com/t/html-transparency/136693/13 "2002-11-14T23:36:31Z")

</div>

Howabout this:

In the head…

```auto

<style type="text/css">
        .foo { filter:alpha(opacity=20); }
        #bar { color : #ffffff; }
</style>

```

In your td tags:

```auto

<td class="foo" id="bar" background=...etc

```

Ugly and non-compliant, but at least it should work in IE.

---

<div class="post-metadata">

**Author:** ![Hauky](https://avatars.discourse-cdn.com/v4/letter/h/0ea827/32.png) [@Hauky](https://boards.straightdope.com/u/Hauky)\
**Post date:** [November 15, 2002, 1:59am UTC](https://boards.straightdope.com/t/html-transparency/136693/14 "2002-11-15T01:59:55Z")

</div>

I’d suggest doing something like what **Achernar** said. Make a GIF in a checkerboard style, with one pixel being color A, the next color B, the third color A again, and so on. Set one color to be transparent, and have the other color be your desired background color (gray?). Use the image as your background for the table cells. This should work in basically any browser.

---

<div class="post-metadata">

**Author:** ![DougC](https://avatars.discourse-cdn.com/v4/letter/d/7feea3/32.png) [@DougC](https://boards.straightdope.com/u/DougC)\
**Post date:** [November 15, 2002, 4:08am UTC](https://boards.straightdope.com/t/html-transparency/136693/15 "2002-11-15T04:08:50Z")

</div>

- 
  - 
    - Hint: get a graphics program that can use _textures_…  
~

- By the by, I am writing an applet and alternately need buttons there, and not there. I can’t figure out how to use the remove() method, it don’t work no matter how I try it and I cannot find any examples on the net:  
add is add(componentName);  
that works.  
remove(componentName); only gets me compiler errors, using JCreator and current Sun JDK.  
… Anybody know?

---

<div class="post-metadata">

**Author:** ![DougC](https://avatars.discourse-cdn.com/v4/letter/d/7feea3/32.png) [@DougC](https://boards.straightdope.com/u/DougC)\
**Post date:** [November 15, 2002, 4:32am UTC](https://boards.straightdope.com/t/html-transparency/136693/16 "2002-11-15T04:32:00Z")

</div>

- Well nuts, I had a closing parentheses in the wrong place…-nevermind.  
~
