Background

Why is’nt the blue swirly background in my #content_bg extending all the way down since I gave it a height of 100%

http://fixmysite.us/index.php

Also the gradient background in the parent div should also be seen?

Thanks…

That’s not how height: 100% works. It has no effect on bg images (or much else, for that matter). Having block elements like h2 inside a span is allso not allowed in HTML. CSS3 would be able to help you with all this (multipl,e resizable bg images) but that’s not mainstram yet.

Also the gradient background in the parent div should also be seen?

Shows for me in Firefox.

For 100% height to have any chance of doing what it’s supposed to do, all the element’s ancestor elements up to <html> must have a height specified otherwise the browser won’t know what to take a 100% of.

Also, as ralph.m pointed out, you have html validation errors.

For 100% height to have any chance of doing what it’s supposed to do, all the element’s ancestor elements up to <html> must have a height specified otherwise the browser won’t know what to take a 100% of.

Actually, A better way to express this is that 100% height is calculated from an EXPLICITLY DECLARED PARENTS HEIGHT, otherwise it’s ignored. if your container , for example had {height:500px;} then the child’s {height:50%} would be honored and calculated at 250px… else it’s ignored. (by extension, this means if you are chaining % heights, for example… then you must give a % height all the way down the chain of elements…

so if you wanted an UL to be 100% height and it was nested in the body and 2 divs downs (HTML>BODY>DIV.first>DIV.second>UL)… then you would have to do something like …

HTML, BODY, .first, .second, .second UL {height:100%}

Actaully you dont HAVE to use 100% for all the parents, just any %, but remember basic math and what happens when you multiply fractions…

Again, this doesn’t affect BG size tho. maybe you should simply reconsider which element contains your BG image.

Got the page to validate,

http://fixmysite.us/index.php

and got rid of the height:100% thing as it wasn’t needed.

But here’s what i’m trying to do. The big box (Content) has the same background as the 3 smaller boxes underneath it (the gradient at the bottom), But I want the blue swirly background on it also (I want the gradient background to overlay the swirl thing so the background would look nice)

Is this a way I can achieve this effect or is there a better way…
<div id=“content”>
<div id=“content_bg”></div>
<p>…</p>
</div>

That way if I relatively position the content div, I can absolutely position the content_bg div and give it a negative z-index to position it underneath the content div