...

View Full Version : <div> background image and scrolling



absorption
03-03-2005, 04:38 PM
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/gallery/heightest.html

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

http://www.absorption.plus.com/1off/gallery/heightestdiv.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

mushu
03-03-2005, 06:26 PM
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!

rmedek
03-03-2005, 09:35 PM
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 ;))



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum