Background-Color: Can Opacity Be Applied To Body?

[tinfanide]

I've tried to use this to make the body background-color a bit of opacity:

* {    background-color: black;    -moz-opacity: 0.8;    opacity:.80;    filter: alpha(opacity=80);    }

It does not work on a background but a div.

[dsonesuk]

* will target all elements, using body {....} will also cause all elements inside it to appear transparent. You will have to create a separate container, that will be the total height, width of page that won't affect any other element.

<div id="opacity_bg"></div><div id="wrapper"><div style="height: 200px; width:900px; margin:0 auto;background-color: #66CC00;"></div></div>

#opacity_bg {	background-color: black;	-moz-opacity: 0.8;	opacity:.8;	filter: alpha(opacity=80);	position:absolute;	top:0;	left:0;	right:0;	bottom:0;	z-index:0;	}#wrapper{position:relative; z-index:999;}

[tinfanide]

Is the trick happening ontop: 0; left: 0; right: 0; bottom: 0;?

[dsonesuk]

position: absolute; takes it out the flow of html document, it occupies no space, the top, left: etc tell its edges this is where i want you, in this case the body or viewing area of your page. looking at it again a better setup would be

body,html{height:100%; margin:0; padding:0;}#wrapper{position:relative; min-height:100%;overflow:hidden;}#wrapper * {position:relative; z-index:999;}#wrapper #opacity_bg {    background-color: black;    -moz-opacity: 0.8;    opacity:.8;    filter: alpha(opacity=80);    position:absolute;    top:0;    left:0;bottom:0;right:0;    z-index:0;    min-height:100%;    } 

<div id="wrapper"><div id="opacity_bg"></div><div style="width:900px; margin:0 auto;background-color:#66CC00;">  <p>Ut aliquip ex ea commodo consequat. In reprehenderit in voluptate lorem    ipsum dolor sit amet, ullamco laboris nisi. Eu fugiat nulla pariatur. Mollit    anim id est laborum.</p>  <p>Ut enim ad minim veniam, sunt in culpa qui officia deserunt. Cupidatat non    proident, quis nostrud exercitation duis aute irure dolor. Sed do eiusmod    tempor incididunt ut aliquip ex ea commodo consequat.</p>  <p>Ut aliquip ex ea commodo consequat. In reprehenderit in voluptate lorem    ipsum dolor sit amet, ullamco laboris nisi. Eu fugiat nulla pariatur. Mollit    anim id est laborum.</p></div></div>

this will now adjust to the content .

[tinfanide]

Yes, I see. But it's a bit hard to comprehend.If there's no width or height specified for the div (black), how can it be spread across the whole HTML page?

[dsonesuk]

?? left: 0; go to zero pixels to left edge of outer parent, right:0; go zero pixels to right edge of outer parent, and so on, left:10px; right:10px will make this elements left-right edges 10px from the parent element boundary edges.

[tinfanide]

But is it must to specify the width and height of an element in order to show the element on the page?I happened to come across the situation where the element cannot be shown because of the fact that the width and height are not specified.

[dsonesuk]

?? Sound like a old IE issue, Thats not true, a block element width automatically adjust to the total width of its parent element, what is the point of adding width:100%; when it already does that for you. If the element is empty of any child elements or text, it will be of a zero height, and if you gave it a red background you of course won't see the red, only by giving it height, or adding content will you be able to see it. A position: absolute; acts a bit like a floated element it shrinks to the content within it. Its edges position is determined by left, right, top, bottom properties, by using these it will stretch to the outer parents outer edge, and if you like beyond it,

[tinfanide]

Making more sense of it after reading ya explanation...Still need a bit more drilling in CSS...