i have a transparent background on my #wrapper.
i want the #header, #nav, Content, #footer, etc. opaque so the page background image doesn’t ingterfere with ogther images and text readability.
reference: http://ccop.mtouchette.com/testing/css-1.html
can this be done (yet), and if so, how?
thanks!
michelle
Try using the value “none” instead of “transparent” or “inherit”
where…in which context?
the opacity is a class attached to the wrapper div as below:
.transparent70 {
filter:alpha(opacity=87);
/-moz-opacity:0.87;
-khtml-opacity: 0.87;/
opacity: 0.87;
}
do i change something there, or do i make a new class for the other divs?
Unfortunately, opacity is inherited, and you can’t turn it off. There are some workarounds, as discussed here, but they are dirty.
A better option is to use rgba (and just let non-supporting browsers go to the deuce): e.g.
background: rgba(255,0,0,0.5);
The problem is, in fact , that OPACITY is not inherited, in the way that a bg image is also NOT inherited. the child of an element with 60% has 100% opacity itself, but it is logical that the opacity of the child be relative to the opacity of the parent. Unfortunately you can’t have opacity > 100%.
Ralph method is nice, but applies only to bg color.
I you want to employ opacity for bg images, I recommend you place the BG in a SPAN element, give it a display: block, and 100% height and width as well as absolute positioning … then you can use the Z index to place it behind all your other elements. sound convoluted , I know… but it works and it’s durable.
Really? rgba color applies to any element, I’m pretty sure.
I you want to employ opacity for bg images
But is that the aim here? The aim, as I see it, was to make the background-color of the #page-wrap div transparent without the same happening to that div’s kids. RGBa is perfect for that, and there are no doubt JS workarounds for non-supporting browzuz.
Correct.
Try it with a background image. Or at least, I’ve looked everywhere for a background-image: url(someimage.png), alpha=something; or whatever.
But is that the aim here?[/quote]
I thought so at first:
But indeed it’s the white box that needs the lowered opacity, not the image, so actually the rgba on the white background colour of the “page-wrap” element would work… but not in IE. Screw some bloated js to fix that: readability and lowered bandwidth for the win! Let IE users just get a white background. Actually might be preferred here anyway.
Ah, I get it. So if my parents die and all their wealth becomes mine, it’s not actually inherited wealth; it’s just that my wealth is relative to that of my parents. Cool. Suck on that, Mr Tax Man! 
Sorry:
opacity !== wealth : ( Wealth is indeed an inherited property.
Hi,
As others have mentioned opacity is not inherited but rather the element and all its children are first rendered and then opacity is applied as a whole to the whole lot. Therefeore there is nothing you can do to a child to make it less opaque because effectively its treated as one element. You can however make a child more opaque because then the child (and all its children) are once again first rendered and then opacity applied as a whole.
For modern browsers you could use rgba as mentioned above and Firefox , Opera and safari (most relatively modern versions) support this. For IE8 you could use the alpha filter to create the opacity and apply position:relative to the children which stops the opacity from being passed to the children. This is because the proprietary filter is not the same as css3 opacity and works in a different way. IE7 however doesn’t stop the opacity with this method (but IE6 does).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Full Page Background Image | CSS #1</title>
<style>
body {
margin:0;
padding:0;
background-color: #4e4d30;
}
img.bg {
/* Set rules to fill background */
/*min-height: 100%;*/
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) {
img.bg {
left: 50%;
margin-left: -512px;
}
}
#page-wrap {
position: relative;
width: 800px;
margin: 0px auto 50px auto;
padding: 20px;
border: 1px solid #4e4d30;
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
}
.transparent_class {
background: #FFFFdd;
background-color:rgba(255, 255, 221, 0.3)
}
p {
font: 15px/2 Georgia, Serif;
margin: 0 0 30px 0;
text-indent: 40px;
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
.transparent_class {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=30)";
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}
.iefix{position:relative;width:100%}
</style>
<![endif]-->
</head>
<body>
<img src="http://mtouchette.com/testing/onLandBkg.png" class="bg">
<div id="page-wrap" class="transparent_class">
<div class="iefix">
<p><img src="http://ccop.mtouchette.com/images/camp1.jpg" alt="camp 1" width="293" height="193" / style="float:left;">Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet
quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat
eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet,
wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum
rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis
pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus
faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
</div>
</div>
</body>
</html>
(Note never put comments above the doctype as that trips quirks mode in most versions of IE and nothing will work properly.)
As an alternative we had a quiz a while ago about this (here) which shows a method for nearly all browsers including [URL=“http://www.pmob.co.uk/temp/quiz20-answer.htm”]IE6 and is a similar solution to the one that Dresden mentioned above.
Hopefully that doesn’t include having whitespace above the doctype, since all of our dynamic pages have a mile of whitespace before it.
Pure whitespace shouldn’t be an issue 
Just out of curiosity: Why is that? Back in the day, a number of web developers were pretty sure there stuff not only didn’t stink, but was also the best stuff since sliced bread**. They would put a couple of screens worth of white space above the markup as a means of hiding it from unauthorized eyes. Since nobody today could be so silly as to follow that idea up, and since the technologies I’ve worked with don’t require it, why the white space?
cheers,
gary
** That begs the question, what was the best thing before sliced bread?
Gary: it seems it’s just what crummy templating systems were born to do, cause almost all of them do it (until the programmer specifically takes steps to stop it).
It’s usually a few lines, not a screens-worth.
I confess I haven’t seen more than a few multi-screen blanks lately, but the eight or ten blank lines in the source is ridiculous. It appears that every included file contains them. It is altogether too simple to write a template (at least in Smarty) that is as well formatted as you’d write a static page, than to do otherwise. Sheesh!
gary