SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: background

  1. #1
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,582
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    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...
    "Oh, and Jenkins--apparently your mother died this morning."

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by lukeurtnowski View Post
    Why is'nt the blue swirly background in my #content_bg extending all the way down since I gave it a height of 100%
    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.

  3. #3
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,729
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,582
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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
    "Oh, and Jenkins--apparently your mother died this morning."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •