I have set a header section of my webpage to an opacity of 40%. I am trying to have a <img> tag within the header, but I want opacity at 100%.

For some reason ALL elements that are placed within the header section are inheriting the opacity of 40%.

Does anyone know how to fix this??

here is what I have:

#container {
   background-color: #ffffff;
   width: 780px;
   margin: 25px auto 0 auto;
   border: 2px solid #000000;
}

#header {
   background: url(../images/header-bg.jpg) no-repeat top left;
   width: 100%;
   height: 250px;
    opacity: .4;
    -moz-opacity: .4;
    filter: alpha(opacity=40);
}

.moduletable-logo {
   float: left;
   opacity: 1;
   -moz-opacity: 1;
   filter: alpha(opacity=100);
}

#logo {
    margin: 30px 20px 20px 20px;
}

For some reason ALL elements that are placed within the header section are inheriting the opacity of 40%.

That's because that is the way it works, opacity is inherited from the parent.

One possible solution to this is the place the image outside of the div, but then position it absolutely or however to appear to be within the header.