[RESOLVED] Background gradient top to bottom???

[Jigabyte]

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!

[mendhak]

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.

[Jigabyte]

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.

[mendhak]

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.

[Jigabyte]

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

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!

[Jigabyte]

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

[mendhak]

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.

[Jigabyte]

That did it ../ thanks very much!!

[mendhak]

No prob.