[RESOLVED] Background gradient top to bottom???

Hi Peeps,

I want to set my masterpage form background colour as a gradient from top to bottom. Does anyone know of a solution please. An example is the O2 site.

Thanks for any help,

Jiggy!

You'll have to make it in an image editing program first. Then it's a simple matter of setting background-image in your CSS.

Thanks mendhak but how do I know what height / width to set. I centre my site and want the background to show the coloured gradient no matter the resolution.

Ah, you don't do that. Create an image with a width of 1px and height of, say, 600.

Note that the bottom bit of the O2 gradient is white. Give your page a background color of white. Give it a background-image of the image you made, but set it to be repeating using repeat-x. When your page grows in height, the white will blend in with the actual white color on the page.

Hi Mate,

I have done what you said but nothing happens; if I set the background color to red I see it on both sides but I don't see my image. Here is the code:-

Code:

---

html, body
{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        background-image: url(images/background.bmp);
        background-repeat:repeat-x;
        background-color: red;       
}

---

This is in my masterpage css file.

Cheers,

Jiggy!

Weird One again; I put the same in a blank website and it works. Any ideas why it won't work in my website?

Probably because of the location of the image. You've set it to be images/background.bmp.

First off, please change that to JPG... BMPs take longer to download!
Second, are you sure that's the right path? Remember that if this is in a CSS file, the path to the image must be relative to the CSS file. So if your CSS file is in 'stylesheets' folder, then it will be looking in stylesheets/images/background.bmp.

That did it ../ thanks very much!!

No prob. :)