dcsimg
www.webdeveloper.com
Results 1 to 11 of 11

Thread: Extra Space w/ Background Image

  1. #1
    Join Date
    Sep 2008
    Posts
    260

    Extra Space w/ Background Image

    Hello..

    If you look at this link: http://ibtestsite.info/Bookclub%28AJAX2%29%28f%29.html

    you'll see that I have my #container outlined in green..

    Right now I'm trying to figure out how to get rid of this extra space underneath the container (or some of the extra space)..any suggestions?

  2. #2
    Join Date
    Apr 2009
    Posts
    122
    Hi ChuckB,
    The space at the bottom is where your #container div ends. This space will be variable, depending upon what the visitors screen size is. You can set the #container to be 100% height, which should be what you're looking for:

    BODY {
    BACKGROUND-COLOR: black;
    HEIGHT: 20px;
    height:100%; /* Important */
    }
    #container {
    BORDER-BOTTOM: green 1px solid;
    POSITION: relative;
    BORDER-LEFT: green 1px solid;
    MARGIN: 0px auto;
    BORDER-TOP: green 1px solid;
    BORDER-RIGHT: green 1px solid;
    height:100%; /* Important */
    }

    Hope this helps.

  3. #3
    Join Date
    Sep 2008
    Posts
    260
    Quote Originally Posted by Andyram2k View Post
    Hi ChuckB,
    The space at the bottom is where your #container div ends. This space will be variable, depending upon what the visitors screen size is. You can set the #container to be 100% height, which should be what you're looking for:

    BODY {
    BACKGROUND-COLOR: black;
    HEIGHT: 20px;
    height:100%; /* Important */
    }
    #container {
    BORDER-BOTTOM: green 1px solid;
    POSITION: relative;
    BORDER-LEFT: green 1px solid;
    MARGIN: 0px auto;
    BORDER-TOP: green 1px solid;
    BORDER-RIGHT: green 1px solid;
    height:100%; /* Important */
    }

    Hope this helps.
    Thanks for the response...attempted it and it's still doing the same thing. In fact this is what I tried before and I get the same results. I also copied and paste your code.

  4. #4
    Join Date
    Apr 2009
    Posts
    122
    Rightio, try this:

    HTML {
    MIN-HEIGHT: 100%;
    HEIGHT: 100%;
    }
    BODY {
    BACKGROUND-COLOR: black;
    HEIGHT: 100%;
    MIN-HEIGHT: 100%;
    }
    #container {
    BORDER-BOTTOM: green 1px solid;
    POSITION: relative;
    BORDER-LEFT: green 1px solid;
    MARGIN: 0px auto;
    HEIGHT: 100%;
    BORDER-TOP: green 1px solid;
    BORDER-RIGHT: green 1px solid;
    }

    Hope this helps

  5. #5
    Join Date
    Sep 2008
    Posts
    260
    Sorry Andyram2k...

    still nothing...

    I think that it has something to do with the background-position property for the #background id...if you notice the background is an image inside a <div> container....I probably could've just set it as the background for the <body>, but I just didn't do it that way...However, it should still work..I'm still playing around with it...

  6. #6
    Join Date
    Apr 2009
    Posts
    122
    Ah, just spotted something in your CSS..

    BODY {
    BACKGROUND-COLOR: black;
    HEIGHT: 100&#37;
    MIN-HEIGHT: 100%;
    }

    Make sure you end with a ;

    BODY {
    BACKGROUND-COLOR: black;
    HEIGHT: 100%;
    MIN-HEIGHT: 100%;
    }

    This should hopefully work for you now

  7. #7
    Join Date
    Sep 2008
    Posts
    260
    It's still there....

    I changed the body background color to 'none'..I want the image to cover the entire background...so I'll still play around with it..

  8. #8
    Join Date
    Sep 2008
    Posts
    260
    I tried to play around with it as much as I could this morning..it's still not doing anything...the min-height stuff isn't working at all...the only time I got something to happen is when I played around with background-position inside the 'bodybackground' id....this just got it to completely center it and that's all...

  9. #9
    Join Date
    Apr 2009
    Posts
    122
    Just to clarify your problem, is it the height you need to be 100&#37; of the screen, as you said in the first post, or do you need the background to fill the entire screen? If so, the background image would need to go in the main body style.

  10. #10
    Join Date
    Sep 2008
    Posts
    260
    Quote Originally Posted by Andyram2k View Post
    If so, the background image would need to go in the main body style.
    Okay, you're right that's it...I tried to design it a little differently but to fill the entire screen it does have to be in the body tag..I think my issue of eliminating space underneath the two long rectangular graphics was a design issue.

    It also seems that 'no matter what' some browsers will give you a little extra space because no matter what I did..even now after the changes you suggested..there's still a little extra space in Firefox, but none in IE....whatever I guess

  11. #11
    Join Date
    Sep 2008
    Posts
    260
    Quote Originally Posted by Andyram2k View Post
    Just to clarify your problem, is it the height you need to be 100% of the screen, as you said in the first post, or do you need the background to fill the entire screen? If so, the background image would need to go in the main body style.
    Okay..check this out....

    with this link: http://ibtestsite.info/Bookclub%28AJAX2%29%28d%29.html

    everything fits perfectly...

    but I wanted it to be coded better...the place where you see the 'interest' options like bicycling..etc, it wasn't efficient coding. So I wanted to include those options with the form above. Those options had their own separate forms and <div>'s. So I had to find a way to include those options in the same form tag with the form above it (Name, Email, Birth..).

    so in this link: http://ibtestsite.info/Bookclub%28AJAX2%29%28f%29.html

    I got rid of those two <div's> for both 'interest' selections and included them in the same table as the (Name, Email) form above them, but I created <table>'s within </table>'s...

    Something happened when I deleted the <div>'s and created <table>'s. The <div>'s on the first link were floated...whatever happened I'm trying to figure out for future references, because the first link clearly shows that I didn't have to include the background image in the <body> tag to get rid of extra space underneath...what do you think?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles