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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    <div> background image and scrolling

    hi all,

    i'm trying to have a typical html background tile image, then another background image on top of that which will sit centered at the bottom of the page. I've used <div> in css to set this up.

    the problem is when i have content, such as another table in the body that extends off the page. when this happens, and the scollbars appear, the scrolling actually 'wipes out' the background from the bottom of the page (in firefox/mozilla on mac). i've played around with overflow, but it doesn't seem to solve this issue.

    i know i'm probably not explaining this clearly, but here's some examples:

    first example is how i *want* it to work, but in this case i'm just using a standard html page background image. when you make the browser window smaller and the scrollbars appear, the background image stays put and doesn't disappear:

    http://www.absorption.plus.com/1off/...heightest.html

    here's the best i can do using <div>:

    http://www.absorption.plus.com/1off/...ghtestdiv.html

    i'm a bit new to doing all this in css, where before i was using tables. i've seen the light and am avoiding tables where possible. any thoughts on this would be greatly appreciated.

    thanks, peter

  • #2
    New Coder
    Join Date
    Mar 2005
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    heh - can you say "Box Model"?

    http://www.brainjar.com/css/positioning/default.asp

    This link will help. Sorry that it's not a code solution, but learning the Why is better than not learning at all...

    BTW, welcome to the CSS universe!

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by absorption
    hi all,

    i'm trying to have a typical html background tile image, then another background image on top of that which will sit centered at the bottom of the page. I've used <div> in css to set this up.
    Well, you're still doing this wacky table thing in the markup. If you want the image to stay fixed in the body, do just that: assign a background image to the body. (body { background: whatever; }) Then you can position any content whever you want to over that.

    Check out these great tutorials for a good, solid intro on building web pages with standards in mind:

    http://htmldog.com
    http://www.w3schools.com

    If you need a hand with the background image in the body thing, feel free to post again (but give it a try first )


  •  

    Posting Permissions

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