HTML/XHTML:CSS Techniques:Gradient background

Objectives
To create a gradient filled background



Create a gradient strip
In image in a drawing program create an image that is say 20 pixels wide and height of 450px e.g. BackGradientGreen.png (in downloads below)

Tip make sure the final fill colour is the same as your default background colour (in the example this is white) that way it will always look right no matter what height the browser is set to.

Add the following style
 body { background-image: url('BackGradientGreen.png'); background-attachment: fixed; background-repeat: repeat-x; }

Downloads
Green Blue Fuschia Grey (Right click and save to your drive)