Web page backgrounds

[jamiet]

I want to create a background image for a web page that fades from top to bottom. I can create an image a few pixels wide and say 600 pixels tall and then tile it across the page, but I want it to automatically resize vertically so that it displays properly at any resolution without repeating the image again at the bottom (if that makes sense!). The blue back ground on the following page is exactly the sort of thing I'm after:
http://www.heritageliving.co.uk/fullsite/swallowfield/

Any ideas?
Thanks.

[baxtersweb]

Hi there. Create your image a few pixels wide and whatever height you choose. Then in head section your HTML file do this:

<style type="text/css">
body {
background: #ffffff url(images/yourimage.gif) repeat-x top left;
}

That will give you a white background and repeat the image across the page. Just change the hexidecimal colour value to whatever you need.

You obviously need to add that to each page you want the background image. Alternatively, you can create a separate CSS file, link to it and specify all your styling in therer which will make changes in the future much easier. Let me know if you need more information.

[_dobbo_]

don't forget to put

</style>

at the end!

[JamieBeeston]

Simon never did have any Style, that'll be why he never closed it and it all drained away :!

/me gets coat!

[silverfox]

I guess you could use er borrow er rewrite the homepage code from the site you linked to...

Body
{
background-image: url(bgs/mainfade.png);
background-repeat: repeat-x;
background-color: #00589F;
margin-top: 20px;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;

}

Micro$oft do the same fading effect across different widths and heights but they generate the images "on the fly" (or appear to according to their code). They use the effect for backgrounds throught to title headings and other elements.

[baxtersweb]

_dobbo_ said:

don't forget to put </style> at the end!

Ahhhh yes, sorry, typed it out a bit quickly.

Oh dear, your jokes get worse Jamie

Yep, you could do as silverfox suggested but as you can see in my original post you can type things shorthand for neatness and to save those precious bytes

[jamiet]

Thanks guys.