homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Help w/ Opacity of relative DIV background

5+ Year Member

Msg#: 3629133 posted 2:36 pm on Apr 17, 2008 (gmt 0)

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.



10+ Year Member

Msg#: 3629133 posted 7:08 am on Apr 18, 2008 (gmt 0)

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."


5+ Year Member

Msg#: 3629133 posted 11:57 am on Apr 18, 2008 (gmt 0)

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.


10+ Year Member

Msg#: 3629133 posted 1:59 pm on Apr 18, 2008 (gmt 0)

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 :)


5+ Year Member

Msg#: 3629133 posted 2:28 am on Jun 26, 2008 (gmt 0)

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.


WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 3629133 posted 4:20 am on Jun 26, 2008 (gmt 0)


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">
-moz-opacity: 0.75;
opacity: 0.75;
<!--[if lte IE 7]>
<style type="text/css">

Good luck!


5+ Year Member

Msg#: 3629133 posted 12:28 pm on Jun 26, 2008 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved