How to make table background transparent

Permalink
Hi everyone,

I am trying to make a table I've created in a Content block transparent so that the background image shows through. I have tried
opacity: .0; in different combinations in the script i.e. after each line of code for the colour or only certain ones but not others but the whole table and the text go completely transparent and not just the background colour. And there seems to be no options on the table tabs in the Content block to make the background transparent. I have a limited knowledge of html (I copied the below from the content block). Thanks as any help would be great.

Here is what I have at the moment:

<table style="border: 0px solid #282929;" border="0" align="left">
<tbody>
<tr style="background-color: #282929;">
<td style="text-align: left;"><span style="background-color: #282929;">Location: London, United Kingdom</span></td>
<td style="text-align: left;"><span style="background-color: #282929;">Height: 5'10'' (177cm)</span></td>
<td style="text-align: left;"><span style="background-color: #282929;">  Appearance: White, Eastern European, Scandinavian</span></td>
<td style="text-align: left;"> Voice character: Friendly </td>
</tr>
<tr style="background-color: #282929;">
<td style="text-align: left;"><span style="background-color: #282929;">Nationality: British</span></td>
<td style="text-align: left;"><span style="background-color: #282929;">Weight: 12st. (76kg)</span></td>
<td style="text-align: left;"><span style="background-color: #282929;">  Playing age: 38 - 45 years</span></td>
<td style="text-align: left;"><span style="background-color: #282929;">Voice quality: Warm</span></td>
</tr>
</tbody>
</table>

Pather
View Replies: View Best Answer
enlil replied on at Permalink Reply
enlil
you want to use rgba color:

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


will give you black, 50% transparency.

If you need to figure the color code you need you can easily open up the core color picker in any instance, select the color you want to use and grab the R, G, and B colors and insert them into the css, the last number (0.5) being the transparency.
Pather replied on at Permalink Reply
Pather
Hi enlil,

Thanks so much for your help. I have added the rgba color as you said but when I change the parameter 0.5 to 0.0 to make the whole background transparent, the whole table and text turn into a white block. When I use say, 0.3, 0.4, 0.8 I get lighter or darker versions of black and not transparency. What am I doing wrong? Many thanks again.
Pather replied on at Permalink Reply
Pather
Here's the script as it stands at the moment:

<table style="border: 0px solid rgba(0, 0, 0, 0.5);" border="0" align="left">
<tbody>
<tr style="background-color: rgba(0, 0, 0, 0.5);">
<td style="text-align: left;">Location: London, United Kingdom</td>
<td style="text-align: left;">Height: 5'10'' (177cm)</td>
<td style="text-align: left;">Appearance: White, Eastern European, Scandinavian</td>
<td style="text-align: left;">Voice character: Friendly </td>
</tr>
<tr style="background-color: rgba(0, 0, 0, 0.5);">
<td style="text-align: left;">Nationality: British</td>
<td style="text-align: left;">Weight: 12st. (76kg)</td>
<td style="text-align: left;">Playing age: 38 - 45 years</td>
<td style="text-align: left;">Voice quality: Warm</td>
</tr>
</tbody>
</table>
enlil replied on at Permalink Reply
enlil
try adding a "background-color" to the style in the first line
Pather replied on at Permalink Reply
Pather
Would the first line then look like this?

<table style="border: 0px solid rgba(0, 0, 0, 0.0);" border="0" align="left" tr style="background-color: rgba(0, 0, 0, 0.0);>
<tbody>
enlil replied on at Permalink Reply
enlil
<table style="border: 0px solid rgba(0, 0, 0, 0.5); background-color rgba (0, 0, 0, 0.5);" border="0" align="left">
Pather replied on at Permalink Reply
Pather
Thank you again. However, I added your line but it doesn't save the new code in the script but reverts back to the original line of code.
enlil replied on at Permalink Reply
enlil
try clearing cache
Pather replied on at Permalink Reply
Pather
Cleared cache but no joy I'm afraid.
weyboat replied on at Permalink Best Answer Reply
weyboat
Try This
<table style="border: 0; text-align:left; background-color: transparent">
<tbody>
<tr>
<td style="text-align: left;">Location: London, United Kingdom</td>
<td style="text-align: left;">Height: 5'10'' (177cm)</td>
<td style="text-align: left;">Appearance: White, Eastern European, Scandinavian</td>
<td style="text-align: left;">Voice character: Friendly</td>
</tr>
<tr>
<td style="text-align: left;">Nationality: British</td>
<td style="text-align: left;">Weight: 12st. (76kg)</td>
<td style="text-align: left;">Playing age: 38 - 45 years</td>
<td style="text-align: left;">Voice quality: Warm</td>
</tr>
</tbody>
</table>
Pather replied on at Permalink Reply
Pather
Many thanks weyboat! That's done the trick. The second row came out as a white block so I the transparent code to the second part of the table in the <tr> thread and all worked just fine.

Thank you weyboat and enlil. You've both been superb.
weyboat replied on at Permalink Reply
weyboat
If you want to vary the transparency, this would do it at 30%
<table style="border: 0; text-align:left; background-color: rgba(0,0,0,0.3);">
<tbody>
<tr>
<td style="text-align: left;">Location: London, United Kingdom</td>
<td style="text-align: left;">Height: 5'10'' (177cm)</td>
<td style="text-align: left;">Appearance: White, Eastern European, Scandinavian</td>
<td style="text-align: left;">Voice character: Friendly</td>
</tr>
<tr>
<td style="text-align: left;">Nationality: British</td>
<td style="text-align: left;">Weight: 12st. (76kg)</td>
<td style="text-align: left;">Playing age: 38 - 45 years</td>
<td style="text-align: left;">Voice quality: Warm</td>
</tr>
</tbody>
</table>
Pather replied on at Permalink Reply
Pather
Thank you weyboat!
MisLilT replied on at Permalink Reply
Hi...
I'm trying to make a table with a light grey background be partially transparent. Or at least the right hand side of the table...
Is this possible?
This is the code I have done so far after reading the above..
<table background-color: rgba(181, 181, 181, 0.5)...Right now the whole background shows through and I can't see any of the grey...I want it to bleed through the grey of the table sorta like washed out effect.