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.
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.
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