# CSS Transparent background: PLS HELP!



## Ragtube (Aug 31, 2008)

I really need help... I would like to add the transparent css for the members section of my website (ragtube.com). I noticed a earlier thread with the solution to my problem...BUT I do not know where to input the information. This is what was written earlier(in the thread): HTML AND CSS: semi transparent background but with full opacity text.:

An example of what I am looking for is found on this site: http://movienewsletters.net/Projects/index.htm

I have attached a copy of my members HTML for ur review... Guys I really need help!





[var.site_name]











[TR]
[TD]





[TR]
[TD]
*[var.message_type]*
- 
[var.error_message] [onload_4;block=tr;when [var.blk_id]=1][/TD]
[/TR]

[/TD]
[/TR]
[TR]
[TD]





[TR]
[TD]
*
[var.code_type]*
- 
[var.code_message] [onload_10;block=tr;when [var.blk_code]=1][/TD]
[/TR]

[/TD]
[/TR]
[TR]
[TD]





[TR]
[TD]
*
[var.message_type]*
- 
[var.error_message] [onload_11;block=tr;when [var.blk_id]=2][/TD]
[/TR]

[/TD]
[/TR]
[TR]
[TD]








[/TD]
[/TR]
Thanks
Team Ragtube


----------



## tomdkat (May 6, 2006)

Thanks for starting this thread.  In the other thread, you posted a link to the image you wanted as the background image. Did you want that image tiled along the background of the page or did you want it in one position, like in the example you linked to above?

Later on tonight, I'll post a screenshot of something I cobbled up over the weekend for clarification of what you are after. 

Peace...


----------



## Ragtube (Aug 31, 2008)

Sir, my intent is for this image to be center in the background... I so apprecaite what you are doing.

Thanks


----------



## tomdkat (May 6, 2006)

Sounds good. Is the ragtube image you posted in the other thread the actual image? The image I saw looked rather small so I was a bit confused by what you were after.

I'll post something for you to see later this afternoon. 

Peace...


----------



## tomdkat (May 6, 2006)

Ok, how does the attached screenshot look to you. I don't have the actual image you want to use so I'm "winging it".  If you can attach the actual image you want as the background to this thread (if you use an image hosting site, I can't download the image), I can have something better to play with.

You've got some serious table nesting going on and some nested tables AND some table cells have individual background colors specified. This will prevent any kind of page background image from showing through.

So, you will need to remove the background color settings from the nested tables and cells that you want to have a transparent background so the background image will appear.

Then, I created an empty div with absolute positioning that has a white background color and an opacity setting of 0.8. This won't work in IE but we can deal with IE later.

Next, I made the current DIV that contains all the page content in a relatively positioned DIV, so it would overlay the empty DIV with the white background. This allows you to adjust the opacity of the white "filter", which controls how much of the page background image that shows through.

An easier approach might be for you to make the background image have the desired opacity (or "dim-ness", in this case) and use that instead of using the absolutely positioned DIV, as I did in the screenshot.

Another way to think of what I described above is this:

I gave the page a background image
I put an empty DIV with a white background with semi-transparency "on top" of the background image
I put the DIV that has the content "on top" of the DIV with the semi-transparent white background
First things first, does the screenshot look anything like what you're after (the specific image I used not withstanding)?

Peace...


----------



## Ragtube (Aug 31, 2008)

This is 100% what I am looking for... Pls because of the nature of what I/we are about to do... I ask that you email me at: [email protected] so I can truly tell you what is about to happen. After the project is complete we can let the world know... but for now this is EXTREMELY PRIVATE WHAT I am asking for.

Yes... this might sound crazy but when I tell you... Again pls email me @ [email protected].

Matter-fact, two days after we finish this we can let everyone know...

Pls, [email protected]


----------



## tomdkat (May 6, 2006)

I'll send you e-mail later tonight. 

Peace...


----------



## tomdkat (May 6, 2006)

Ok, I've been working on this a bit more and I think going with a page background image that has transparency applied to it directly will be your best option.

Attached are screenshots of the page with a transparent PNG as the background image and with a JPEG with a white "filter" applied to give the "watermark" look you're after.

Regardless of this, you will still need to remove the background color specified in the nested tables and table cells to get the background image to appear at all.

Here is an example of what I mean:

```
<td width="63%" height="194" align="center" valign="top" [b][color=red]bgcolor="#FBFBFB"[/color][/b]>
<div name="invite_table">
<table border="0" width="100%" [b][color=red]bgcolor="#FBFBFB"[/color][/b] cellspacing="0" cellpadding="0" id="table18">
	<tr>
		<td align="right" height="25" colspan="2" style="border: 0px solid #C0CEEF; " class="default_text_white" [b][color=red]bgcolor="#FBFBFB"[/color][/b]>
		<div align="center">
			<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table31">
				<tr>
					<td background="http://forums.techguy.org/images/box_blue_middle.jpg" class="default_text_white">&nbsp; <b><font face="Arial" size="2">Who am I</font></b></td>
					<td width="4">
					<img border="0" src="/images/box_blue_square_right.jpg" width="4" height="25"></td>
				</tr>
			</table>
		</div>
		</td>
	</tr>
```
See the "bgcolor" attributes I highlighted above? ALL of those will need to be removed, throughout the nested tables that contain the content. Those attributes assign background colors that will prevent the background image from showing through.

Peace...


----------



## Ragtube (Aug 31, 2008)

So if I understand you correctly... by removing them... we have success... with this project! Also the links are dead...


----------



## tomdkat (May 6, 2006)

Removing the background color specification from the nested tables and cells, whatever background image you have will be shown through the table. Take care of that first.

Once the background image shows through, create a background image that has the desired amount of transparency applied and things should look the way you want.

What links are you talking about? To the attachments? I was able to view them using a different browser just fine so you should be able to view them as well (unless you've got some kind of image blocker invoked).

Peace...


----------



## tomdkat (May 6, 2006)

One last thing, REMOVE the JavaScript at the top of the page:


```
<link href="/css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body topmargin="0">
[b][color=red]
<script language="JavaScript1.2">
/*
Watermark Backgound Image Script- &copy; Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and TOS,
visit dynamicdrive.com
*/
if (document.all||document.getElementById)
document.body.style.background="url('ragtube1.GIF') white center no-repeat fixed"
</script>
[/color][/b]
<body>
<div align="center">
```
Remove the code highlighted above. That is no longer needed. 

Peace...


----------



## Ragtube (Aug 31, 2008)

Guys... he did it! Thank You Sir...


----------

