Jump to content
tinfanide

Background-Color: Can Opacity Be Applied To Body?

Recommended Posts

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.

Share this post


Link to post
Share on other sites

* 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;}

Edited by dsonesuk

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 .

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

?? 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,

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...