Non transparent image in transparent block

Question

Hi, I have a div:

#logo_area
{
background-color: #d9e670; 
filter:alpha(opacity=25);
opacity:0.25;
}

and another div:

#logo_image
{
background: url(../images/logo.png) no-repeat center 50%;
}

<div id="logo_area">
  <div id="logo_image"></div>
</div>

Of course, logo_image is transparent too. Could I make it untrensparent in transparent block?

Answer 1

I don't think so. I am not sure if it's possible to bring it to 100% transparent if the container isn't.

However, what you can do is put it outside the block, such as:

<div id="logo_image"></div>
<div id="logo_area">
</div>

Then on the logo image block, add:

#logo_area
{
    position: absolute;
    height: x;
    width: y;
}

So it should sit on top of the logo area div, but not be part of it. You may need to set the height of the logo area though, as the logo image will not cause it to stretch.