Varying the size of a background image

Hi,

I have a site where all the pages are unfortunately different lengths. My background image is a gradient, and I originally just used a long version of the image to cover all eventualities. It’s now been pointed out, however, that this producers a scroll bar on the shorter pages, which makes viewers expect to find something at the bottom of the page. I therefore want to set the height of each page’s background image individually.

I know I can do this by creating a different Photoshop image for each page, but this seems hugely time-consuming. I was hoping there would be some code by which I can dictate a cut-off point for the background image, but haven’t found one. I obviously don’t want to just shrink the image, as this wouldn’t work in the transition between pages.

Any advice would be appreciated please!

Thanks
B

The best thing to do is have a background color on the body and have the gradient as a background image on the body element. Let the gradient image fade into the background color. A background image won’t cause scroll bars, no matter how tall, so it’s up to you at what point the gradient fades into the bg color.

Brilliant!

So clever. thanks everso. Will give it a try!

Well I tried that and was really happy with the result… until today! I’ve just looked at the site on a iPad, and on there the gradient repeats vertically. Which looks naff. My code is as follows: body {
font-family: Verdana, Geneva, sans-serif;
color: #333;
font-size: 14px;
background-color:#9dae87;
line-height: 150%;
background-repeat: repeat-x;
background-image: url(images/2gb4.jpg);}

I had thought that the repeat-x meant that it would not repeat horizontally, but just vertically?

Am I doing something really daft (again) or do iPads not have this facility? I was using Safari, but I’m afraid I’m not sure which version. Browserlab showed it working fine in Safari 5.1 OS-X

The site can be seen at http://www.gillwykes.com/development/jwa/ but of course it looks as if it’s working perfectly if not viewed on an iPad.

Thanks for your help, and patience with my newbie questions! I’m longing to be able to help other people on here in return!

Hmm, I’d like to know the answer to this, also. I had no idea that it would display so differently on an iPad.