Hi all.

I want to design a gradient background which runs down the horizontal and vertical length of my webpages.

I took a tutorial and I was told to make a thin vertical strip and shade it accordingly (dark at the top blending to lighter at the bottom). I did this in Powerpoint and saved it as a gif. I then uploaded the image to my server.

I then used some css script that said it would fill the page. However, it simply has a white background and the strip which I created running down the centre of the page only.

Here is the script I used...

<style type="text/css">
body
{
background-image:
url('image.gif') background-repeat: repeat-x
}
</style>

I also tried replacing the x with a y but still to no avail.

Any ideas? Perhaps, making a strip in Powerpoint isn't the way to go and perhaps I should create my gradient using a full page. But surely, if my webpage is bigger than the Powerpoint image it still will not fill the webpage?

TIA - Dav.

PowerPoint is decidedly not Web design software, but that being said, I'm surprised you were able to get as far as you did. Maybe there are a couple tricks that can be performed with this software. Craziness!

Anywho, give this a try:

<style type="text/css">
body
{
background:url('image.gif') left repeat-y;
}
</style>

That will tile your background down the left side of the page. To tile a background across the top, you'll need to wrap your entire page in a container (<div> will work nicely), and apply a style to that container identical to your body style, but using the parameters 'top' and 'repeat-x'.

you missed a semi colon on your code
<style type="text/css">
body
{
background-image:
url('image.gif') background-repeat: repeat-x
}
</style>

add ";" before background-repeat
<style type="text/css">
body
{
background-image:
url('image.gif'); background-repeat: repeat-x
}
</style>