Transparent background but not child elements

**Thinskys** · 11-21-2007, 04:14 AM

I am trying to set the background of a element to transparent but not the child elements. Here is the code I have:

.nav {
background-color:#000000;
float:left;
filter:alpha(opacity=80);
opacity: 0.8;
-moz-opacity:0.8;
width:230px;
height:230px;
}

.navImage{
width:50px;
height:50px;
}

<div class="nav">
<div class="navImage"<img src="images/atc_logo.gif"></div>
</div>

Any idea if it is possible to make the background transparent but the child elements 100%?

Thanks in advance.

**coothead** · 11-21-2007, 09:54 AM

Hi there Thinskys,

and a warm welcome to these forums.

try it like this...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#container {
    position:relative;
    width:230px;
    height:230px;
    float:left;
 }
.nav {
    position:absolute;
    background-color:#000;
    filter:alpha(opacity=80);
    opacity: 0.8;
    -moz-opacity:0.8;
    width:230px;
    height:230px;
}
.navImage{
    position:absolute;
    width:50px;
    height:50px;
    left:90px;
    top:90px;
}
</style>

</head>
<body>

<div id="container">

<div class="nav"></div>
<div class="navImage"><img src="images/atc_logo.gif" alt=""></div>

</div>

</body>
</html>

coothead

Thread: Transparent background but not child elements

Thread Tools

Search Thread

Transparent background but not child elements

Bookmarks

Bookmarks

Posting Permissions