I have a website, in which some pages will need to be "longer" than others.

Currently my website is set to have a height of 750px. This is long enough for some pages, but not long enough for others. Some pages completely run over the background images into white space.

Should I use seperate stylesheets for these longer pages and change the height attributes, or what is the best way to do this?

Why are you defining a set height for the page?

Excellent question, why indeed ?? Not a good idea, for exactly the reasons you're asking about.

The reason I did it because when using div's and CSS, the background doesn't continue if I don't have any content over the area (or if I don't have a height specified.) My site is made of basically a left, center, and right column. The backgrounds of the three columns fit together, so if the heights aren't the same they don't fit together properly.

Does that make sense?

Hi,

That's quite clear.
I think what you need is to smoothly redefine your design, in order (for example), to make your images end on a full color. This way, your pages could have any height : if it's smaller than your images, they fit; if it's bigger, all your images end on the same plain color, so the color on each column fits together (since it's the same).
But could you give us a url in order to clearly see your case, please ?

Hello -

I like Marvin's suggestion, but also would like to see a link to your site so we can take a look and see exactly the design considerations at hand.

Yours, Scott

You might also want to look into the 'faux columns' method:
http://www.alistapart.com/articles/fauxcolumns/

www.tunerspec.ca

You'll notice (if you look in the stylesheet) the left column uses http://tunerspec.ca/images/column_left_bg.gif and the right column uses just the mirror of that same image.

Bump!

You were saying that your background just stops. If you dont want to use Mosaic-like background you could change the background position to fixed, so it fixes to the screen. I forgot now what the CSS attribute was, i think it was " Background-Position: fixed ", but im not sure right now (and dont got time to search.
The CSS-Referencee at www.tizag.com could help.

Thanks for the suggestion! The code is background-attachment: fixed;.

I actually ended up using a javascript to have all three columns on my page the same length. It works amazingly.

If anyone is interested in using it, you can find it here: CLICK