homepage Welcome to WebmasterWorld Guest from 54.196.197.153
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Help w/ Opacity of relative DIV background
pghtech




msg:3629135
 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.

 

Setek




msg:3629810
 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."

pghtech




msg:3629893
 11:57 am on Apr 18, 2008 (gmt 0)

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




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

noyearzero




msg:3683639
 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.

swa66




msg:3683703
 4:20 am on Jun 26, 2008 (gmt 0)

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




msg:3683991
 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