0

I have a basic site with a header, a main application window with a bunch of jQuery and multiple divs in one container, and also a footer with a few links, these only take up about 620px in height and what I'd like is to have my page cut off at about the 625px mark but I can't seem to get around having a white space at the bottom if I set my background image to 100% and it's container to 625px.

This only happens when I maximize the resolution of my browser window via full screen mode (in firefox if it matters), I leave it in regular viewing mode, my page looks great but this got me thinking that the white space at the bottom would probably show for other ppl with higher resolution. If I set the height of my background container to 768px, no white space w/full screen but I get a vertical scroll bar and a bunch of useless space at the bottom. This makes the site look kind of weird because there's only one window which acts as an application with multiple animations.

Is there a method for ending a page at a specific px dimension and still have it fit with a high resolution screen without having to re-flow the entire page? I only ask because I have a lot of absolute divs and re-flowing them to re size accordingly will not look very attractive. Why not just use flash? Because I like to use Javacript whenever possible to avoid depending on Adobe flash player.

Thanks

dcd0181
  • 1,493
  • 4
  • 29
  • 52

2 Answers2

2

You can use jQuery to resize the container to fit the window which will also resize when the browser window is resized, but it's not the ideal solution, so I'd recommend setting the background image on the body with an image that exceeds the height of most browser windows so that it'll just be cut off by smaller resolutions without a scrollbar and no white space will ever be seen. If that's what you mean.

Community
  • 1
  • 1
Tak
  • 11,428
  • 5
  • 29
  • 48
  • Thanks, I saw this as well but I've read that ppl were having undesirable results more so than not. Like you said, I could just set the background image to like 1000px but I'd have a bunch of useless space at the bottom which just looks plain goofy in my situation, useful link though :o) – dcd0181 Jul 03 '11 at 01:24
  • I actually found an answer here, it involves setting the body's overflow to hidden and defining the img as a css style http://stackoverflow.com/questions/2200391/scalable-background-html-css-javascript – dcd0181 Jul 03 '11 at 02:44
0

I'm not totally sure what you're looking for, but see if this css would work: html,body {height:100%;} body {background-attachment:fixed;}

Stephen
  • 7,994
  • 9
  • 44
  • 73