Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation CSS Problem- 100% BG Image does not go beyond scroll bar..

    Hi All,

    This might be an all too obvious problem, but not to me. I have done extensive research on this, peeked at code which seems to do what i'm looking for, but the problem still continues.

    The problem is I have a background image which is to outline my page with shadow edges. I have that set to repeat y, minheight: 100% and height: 100%, but it only fills the screen which is the problem. When you scroll down the page (what is beyond the screen) the background image does not continue.

    I have included a screen-shot of my site to help illustrate the problem I'm having better:
    http://www.freewebs.com/jrgirard/cssbgproblem.png

    The source code of the page:
    http://www.freewebs.com/jrgirard/sourcecode.png

    The CSS code of the page:
    http://www.freewebs.com/jrgirard/csssourcecode.png

    I've thought of setting the bg image to something like 1000px but then that would cause the page to go way beyond what is necessary in length.

    Thanks for any help in advance,
    PS. Does anyone actually think the site looks good the way it is, and I should just forget about this problem?
    Jon.

  • #2
    Regular Coder
    Join Date
    Nov 2006
    Posts
    246
    Thanks
    13
    Thanked 26 Times in 24 Posts
    It's because of the 100% height. 100% height causes the element to span only 100% of the browser body. If the browser goes beyond 100%, the element wont span with it. You should be able to just take out min-height:100%; and height:100%; and it'll span automatically. If you do this, and the background image disappears all together (which may be why you went to 100% height to begin with), then you need to have your main-block-external clear the floating columns inside it. To learn how to do that, read this:

    http://www.positioniseverything.net/easyclearing.html

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hmm.. I'll play around with the clearing..

    Thanks,

    I'll play around with the clearing some more. So far I've set it to clear with still no luck..

  • #4
    New to the CF scene
    Join Date
    Jan 2008
    Location
    Orlando, FL
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Majoracle View Post
    It's because of the 100% height. 100% height causes the element to span only 100% of the browser body. If the browser goes beyond 100%, the element wont span with it. You should be able to just take out min-height:100%; and height:100%; and it'll span automatically. If you do this, and the background image disappears all together (which may be why you went to 100% height to begin with), then you need to have your main-block-external clear the floating columns inside it. To learn how to do that, read this:

    http://www.positioniseverything.net/easyclearing.html
    In his example, there is a lot of content which spans past the actual size of the browser body and creates the scrollbars. But if he takes out the "height:100%" and the content in his page ISN'T enough to make the DIV extend down enough to cover the entire page, you will have the same problem with it cutting off early. Say he takes out most of the text, and it only goes down 75% of the browser body. That means his backgrounds will only go down 75% of the way, because he took out the height:100%. Am I right?

    I'm having the same problem WebDevJon, and somebody suggested this link:

    http://nopeople.com/CSS/full-height-layout/

    I'm going to try this and see if it works.

  • #5
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question I got it fixed..

    Hi There,

    It turns out i fixed the entire problem gofizbo, got the answer from another forum

    All that I had to do was remove all the height 100%'s and what actually was causing the problem were any float:lefts I had in the code. Upon removing the height settings and float settings everything worked fine.

    Thanks, and good luck.

    Jon.


  •  

    Posting Permissions

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