Images also transparent in opacity layer

[escapedf]

hi all,

i am trying to put an image into a div that has an opacity of 40%…

i want the background colour to be transparent, which it is,
but i dont want all the things in the layer to be transparent
(ie logo etc)

any ideas??

the header css looks like this:
#header{
width: 940px;
height: 132px;
background-color: #530D1C;
filter:alpha(opacity=40);
opacity: 0.4;
-moz-opacity:0.4;
}

[Stomme_poes]

This is a regular problem with opacity. You simply cannot set opacity on some box without hitting the children. This is because, for the children, the parent’s lower opacity is their “100% opaque”. So the children see 0.4 as 100%, or as opaque as they can possibly be.

Some ideas:

1. I’ve done it where, so long as the children were approx a set height, made the background div and the content as siblings rather than parent-child.

So like
<header>
everything to be semi-opaque in here
</header>
<stuff to be fully opaque here/>

Then #header can have its CSS like you have it, with a set height (height can be in em’s), and the child <stuff> gets a negative margin to pull it up over the #header area.

This method is brittle and creates more code than otherwise necessary, so while I’ve done it, it should probably be a last resort.

2. Another method is an actual image that looks like it’s semi-opaque. It will work if the #header doesn’t grow much or at all in height and cannot slide around from left to right (or, whatever’s behind it cannot slide around from left to right). The image isn’t a PNG with alpha-transparency: it’s the background image with a semi-trans layer of whatever colour (white?) you want layered on top of it… then you flatten it and make it an 8-bit PNG (or jpg if you want). This will mean no fancy crap necessary for IE6 and an overall smaller filesize (than a semi-trans PNG).

Does not work if stuff on the page moves (if page is flexible width or content inside header can grow down) <— but if you’re willing to make an image that’s quite tall then some growth can be allowed and there can be enough “image” there… or, alternatively, the image can fade to bg colour at the bottom.

3. CSS3 background-opacity using rgba to set both the colour and the opacity. Does not work in IE, but if your design is ok with a solid background colour for IE, this can be an option. So if you have a background image and you’re making it partially white, you could do so:
   background-image: url(blah.png);
   background-color: rgba(255, 255, 255, 255, 0.4);

Hm, I forget if you can make the actual background image 0.4… I’d have to look it up.

[escapedf]

hi there…
thanks for the reply!

hmm slightly confused with 1 and 2…
maybe you can give working examples ??

ive tried your idea with your suggestion 1:
it still takes the opacity from header…
what am i doing wrong?

heres the code:

<div id=“header”>
</div>
<div id=“headerstuff”>
<img src=“assets/images/dfgdg.jpg” class=“floatleft” />
<h1>heading one</h1>
</div>

#header{
width: 940px;
height: 132px;
background-color: #530D1C;
filter:alpha(opacity=40);
opacity: 0.4;
-moz-opacity:0.4;
}

#headerstuff{
height: 132px;
margin-top: -20px;
}

[Stomme_poes]

Looks like it’s close.

What you do is pull the headerstuff as high up as the #header is tall. Maybe when starting out with this stuff, use ugly background colours so you can see what’s happening.

#header {
  width: 940px;
  height: 132px;
  background-color: #530D1C;
  filter:alpha(opacity=40);
  opacity: 0.4;
  -moz-opacity:0.4;  /*you know this is only for like FF2 or whatever, right?*/
}

#headerstuff {
  height: 132px;
  [b]margin-top: -132px;[/b]
} 

That basically should do it, however if that’s not working at all on your page, there may be other code interfering.

I have an example of of this opacity trick but since it involves a bunch of other stuff, it’s not really the best example for this. Maybe I’ll make a simple one.

For example 2, I think I’d have to download some software, because my OS won’t take screenshots if I’m opening a menu in the GIMP. Sucks. If you have any basic image editing software that has “layers” and lets you set the opacity per layer then I can go through a basic version of example 2. Though I’d prolly want an example image (whatever is the background of #header) to do it with.

[escapedf]

hi,
that didnt change anything . just moved it up a bit…
the opacity still shows

thanks for the suggestion, but its not working
i hardly have anything else on page

anyone have any other ideas???

[Stomme_poes]

the opacity still shows

This is confusing me. I’m starting to suspect what you want is not what I thought I read.

Do you have an image you can post (links are nicer than attachments because they’re faster… img.ur or something) that shows what you’re going for? Then I can code some examples.

[Stomme_poes]

Ah, my bad. I learned something new:

https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context

@mozilla

A stacking context is formed, anywhere in the document, by any element which is either

* the root element (HTML),
* positioned (absolutely or relatively) with a z-index value other than "auto",

* (in Gecko/Mozilla browsers) elements with an opacity value less than 1

You were looking in Firefox? Aha. Not sure who else does this. Ah, Safari and Chrome. *Edit seems to also be in Opera too

So in my original code, I made the assumption (which is absolutely true if we don’t change any opacity) that elements later in source order stack “higher” than elements earlier in source order, so just pulling the later element up with a negative top margin also keeps that element on top (remove opacity to see this).

However, at least in Gecko and webkit (*edit and Presto) browsers, this stops being true once we make things less opaque. Arg.

However, simply setting headerstuff to position: relative (which I often end up doing for other reasons in more complicated code anyway, which is why I never saw this) ensures the later-in-source stuff remains on top… and so not seethrough.

http://stommepoes.nl/opacitytest.html

[system]

You forgot to

@Stomme_poes

[…] use ugly background colours so you can see what’s happening.

[escapedf]

basically, what im trying to do,
is make sure the elements of a div with opacity - (ie logos) DONT also end up with the opacity that i set on the background colour, not quite sure how else to explain it…

thanks ill look at :
http://stommepoes.nl/opacitytest.html

[system]

Sp’s example does just that

As for layers, starting form Sp’s, you can also look at this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <meta http-equiv="content-language" content="en"> 
    <title>Opacity</title> 
    <meta name="description" content="Opacity in the background, not in the foreground"> 
    <style type="text/css"> 

      body {
        background: yellow;
        }

      #header {
        position:relative;
        height:300px;
        width:500px;
        margin:0 auto;
        }


      #layer1, #layer2 {
        position:absolute;
        top:0;
        left:0;
        }

      #layer1 {
        width: 100%;
        height: 100%;
        background: red url(drmcninjahelmet.jpg) 0 0 no-repeat;
        -moz-opacity:0.4;
        opacity: 0.4;
        filter:alpha(opacity=40);
        }

      #layer2 {
        height:65%;
        border: 3px solid #fff;
        overflow: hidden; /*wrap float*/
        }

          #layer2 img {
            float: left;
            margin: 10px;
            border: 1px solid #c00;
            }
 
    </style> 
</head> 
<body>
  <div id="header">
  
    <div id="layer1">
    </div>
    
    <div id="layer2"> 
      <img src="newt.png" width="136" height="123" alt="NEWT" /> 
      <h1>heading one</h1> 
    </div> 
    
  </div>
</body> 
</html>

[escapedf]

thanks guys!
ill have a look at these a little later!