Help w/ Opacity of relative DIV background

[pghtech]

Greetings I am new to the forums, but been visiting the site for while and enjoy the articles and info.

My problem/question is that I have read on how to make a DIV background with a level of Opacity without affecting any text. My test of performing these recommendations have not worked and have always resulted in complete Opacity for all content.

My situation is that I have a relative positioned Div floating above another DIV and want to make the background 0% Opacity (completely transparent - maybe that's termed 100% Opacity) so that the graphics of the DIV underneath will show through. Obviously I will like it to be compatible with your popular browsers as I know the related commands vary.

Thanks in advance for the assistance.

[Setek]

Hi pghtech

Your request sounds a little odd -- if you just wanted it to be completely transparent, why not just remove any background image or colour on the

div

entirely?

div.that-is-on-top-of-another-div { background-color: transparent;
background-image: none; }

By the way, opacity refers to opaqueness (opaque means impenetrable by light,) whereby opaque is not see-through, and transparent is see-through. 0% opacity would be "not opaque at all" and 100% opacity would be "completely opaque."

[pghtech]

Setek
I greatly appreciate the info and clarification. As you can see I am complete new at this and working on a personal project. I believe my confusion came about when I was looking up "transparency" and kept being deferred to the 4 or so Opacity or Opacity related statements (e.g. filter:alpa, Opacity).

I will try those then. Thanks again.

[Setek]

Hi pghtech,

No problem :) You should know that if you haven't specified a background colour or a background image, your

div

should already be able to see what's beneath it -- making both the declarations moot point.

Have you actually tried overlapping it and seeing whether it only shows the

div

beneath it?

The best way to find out the answers to questions is to give it a go :)

[noyearzero]

hi guys, it looks like this question has been answered but i have a similar one.

i want what the same thing...but instead of 0% opacity...i want 75%.

so basically i have my background image. my main div centered on the page. i want it to be light blue and only very slightly transparent. Then i want the content of that div to be fully opaque (text, pictures). i tried putting another div inside my main div that was position:relative. this works in IE but not firefox. is there any work arounds? right now i have it set to translucent in IE but solid light blue in FF.

i know i can accomplish what i want by making the background image of the main div a semi transparent .png file. i'm hoping for an html fix since its easier to change in the future.

[swa66]

noyearzero:

try to set both the mozille specific (older ones) and the standard one. I presume you already have the expression since you claim IE works (it's nonstandard code, belongs in a conditional comment.

<style type="text/css">
  .opacity{
    -moz-opacity: 0.75; 
    opacity: 0.75;
  }
</style>
<!--[if lte IE 7]>
  <style type="text/css">
    .opacity{
      filter:alpha(opacity=75); 
    }
  </style>
<![endif]-->

Good luck!

[appi2]

Maybe I'm misunderstanding, but both questions seem to be the problem of when you set transparency on an element all children of that element will also receive that transparency.
The only way around that problem is to use absolute positioning and z-index.