Transparent DIV?

[Mysterious]

I've googled, i've read some of the DIV threads under the CSS forum and none of them make a lick of sense to me. i'm still a newbie to CSS but i'll paste what is the CSS i'm working with. I'd basicly like to make the <DV> tags transparent fully. I tryed remiving background and replaceing it with transparent, no go. i tryed the "class" tags outside the CSS Style sheet and inside the atual .html file and no go and now i'm just lost. Anyone out there able to lend a newbie a hand? thanks in advance.


/* CSS Document */

body {
text-align:center;
font-family:verdana;
font:normal 12px/1.6em Arial, Helvetica, sans-serif;
color:#2a3845;
margin:10px;
padding:0;
background:#f7f7f7;
background:#000000;
}

#pagewrapper,#page { width:760px; margin:auto; text-align:left; display:block; }
#page { border:1px solid #333333; color:#CCCCCC; background:#000; }

#header
{
display:block; height:100px;
padding:0px;
clear:both;
margin:5px 5px 0 5px;
}
#header h1 { margin:0; padding:0; font:30px Georgia, serif; margin-top:20px; margin-left:40px; }
#header h2 { margin:0; padding:0; font:14px Georgia, serif; margin-left:40px; }

#topnav
{
color:#FFFFFF;
margin:0px 5px 5px 5px;
font:13px verdana;
padding:5px;
background:url(topnav_bg.gif) #333333;
}

#topnav ul { list-style-type:none; margin:0; padding:0px; }
#topnav ul li { display:inline; margin-right:6px; margin-left:6px; }


#main
{
margin:5px;
border:0px solid #CCCCCC;
clear:both;
display:block;
margin-bottom:40px;
}

#left { width:25%; float:left; margin:10px; }
#body { width:67%; float:right; margin-bottom:20px; margin:10px; margin-left:0px; }

#footer { clear:both; margin:5px; vertical-align:middle; text-align:center; font-size:12px; display:block; }
.bcol { color:#f0bf5e; }


/****************************************************************/

#main h2 {
color:#f0bf5e;
margin:20px 0 6px;
padding-bottom:10px;
font:normal 17px Georgia, serif;
border-bottom : 1px solid #e2dfdb;
}

#main { font:12px verdana; line-height:15px; }
p { padding:0; margin-left:10px; margin-right:5px; margin-top:0px; margin-bottom:8px; }
/******************************************************************/

#footer { background:#333333; color:#FFFFFF; padding:5px 0px 10px 0px; }
#header{ border-top:3px solid #666666; border-bottom:0px solid #666666; }

a { color:#a27a2a; }
a:hover { color:#666666 }
#topnav a , #footer a{ color:#f0bf5e; text-decoration:none; font-weight:500;; }
#topnav a:hover, #footer a:hover { text-decoration:underline; }

.nav ul { margin-left:4px; list-style:inside; margin-top:10px;padding:0; }
.nav li { margin-bottom:2px;padding:0; }

[jscheuer1]

Style is often meaningless without markup, so a link to your page would help, probably a better explanation of the exact effect you are after would be good too. Anyways, the way to make the background transparent is to set it that way in style. If you have conflicting styles, the easiest way to be sure is to set it inline, ex:


<div style="background: transparent none;">Whatever</div>

However, all this will do is make that division's background transparent. You will still see the background of anything underneath it (often the body, but can be any parent element or positioned element that happens to be there underneath it and have background). And you will see the background of things contained within it.

Also, transparent background has nothing to do with partial opacity. You either see through it like it's not there, or you can't see through it at all.

If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[Mysterious]

Okay, I've uploaded my blank.html (http://utsw.iwarp.com/blank.html) page where i do all my testing before i place codes in to full effect to cover the rest of my website. As you can see there is a white background but thats because i offset it to 'white' to ensure the water mark code is working correctly. i plan to change it to black again so the watermark blends in easily.

I found the code you suggested jscheuer1


<div style="background: transparent none;">Whatever</div>

To work so i left it to show that it does on the blank (testing) page. However instead of just having to go through.. roughly 20 different web pages to place in to re-adjusting of the codes on each page. is there a way to do it from the Style sheet?

Reason trying to change all DIV tags to 100% Transparent also is so i can use this code here... Watermark Background Image Script (http://www.dynamicdrive.com/dynamicindex3/fixback.htm)

<script language="JavaScript1.2">

/*
Watermark Backgound Image Script- © 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('notebook.jpg') white center no-repeat fixed"

</script>

So once i'm able to get the DIV tags to transparent, i'll change this section of coding From

document.body.style.background="url('notebook.jpg') white center no-repeat fixed"

To

document.body.style.background="url('notebook.jpg') black center no-repeat fixed"

So i can have the water mark blend in with the black background but have the watermark show through the body DIV tags.

Aside from the link to the page, here is the codeing i'm working with.



<head>
<title>UTSW Ultima The Secret Weapon</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<script language="JavaScript1.2">

/*
Watermark Backgound Image Script- © 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('watermark.jpg') white center no-repeat fixed"

</script>
<div id="pagewrapper">
<div id="page">
<div id="header">
<span class="bcol"><img src="utswnetwork.jpg"></span>
<h2>Ultima The Secret Weapon</h2>
</div>
<div id="topnav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="http://secretweapon.x.am" _"new">Forums</a></li>
<li><a href="http://mataniah.blogspot.com/" _"new">Mataniah Blog</a></li> <li><a href="map.html">Site Map</a></li>
</ul>
</div>
<div id="main">


<div id="body">
<h2>About Us</h2>
<p>
<CENTER>
</CENTER>

<p>

<h2><a href="map.html" _"new">Site Map</h2>
<p></p>



</div>
<div id="left">
<h2><a href="http://secretweapon.17.forumer.com/viewforum.php?f=6" _"new">News</a></h2>
<p>
<h2>Sugested Links</h2>
<div class="nav">
<ul>
<li><a href="http://wiki.ffxiclopedia.org/wiki/Main_Page">FFXIclopedia</a></li>
<li><a href="http://www.ffxiah.com">FFXI AH Online</a></li>
<li><a href="http://www.ffxi-atlas.com/">FFXI Atlas</a></li>
<li><a href="http://www.playonline.com">PlayOnline.com</a></li>
</ul>
</div>

<h2>Navigation</h2>
<div class="nav">
<ul>
<li><a href="http://secretweapon.17.forumer.com/viewforum.php?f=8">F.A.Q (redirect)</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="psi.html">Point System Info</a></li>

</ul>
</div>


</p>
</div><!-- END OF LEFT BAR -->

</div><!-- END OF MAIN DIV TAG -->

<div id="footer">Designed by <a href="http://mataniah.blogspot.com/">Mataniah</a></div>

</div>
</div>
<div style="background: transparent none;">Whatever</div>
</body>
</html>


( I hope i explained it right >< )

[jscheuer1]

The reason why some of your divisions have background is because they are selected by id's or other selectors which define background for them. Either go through everything and remove those backgrounds, or put this as the last rule in your stylesheet:


div {
background: transparent none!important;
}

Even after that, there are a few items that appear to have background. They must not be divisions.

[Mysterious]

The reason why some of your divisions have background is because they are selected by id's or other selectors which define background for them. Either go through everything and remove those backgrounds, or put this as the last rule in your stylesheet:


div {
background: transparent none!important;
}

Even after that, there are a few items that appear to have background. They must not be divisions.

The Code work perfect, yeah only the spacing image and the logo has no div, just a solid images. However with changing of the water mark background. it comes out perfect!

Thank you very much for your help jscheuer1.