How to create a gradient background for an HTML page

Question

I am in the process of learning HTML.

What is the best way to create a gradient background for an HTML page?

So far this is what I have as a background:

Answer 1

This cannot be done in html but it can in css (specifically css3).

You would have to add a class to the body of your page or a div within it that surrounds all of your content. You can use a css gradient generator to get the code to put in your css class.

Here is a simple example on a div: http://jsfiddle.net/8fDte/

You can do the following as well if you want it on the body. Note you have to link to the css file that will store you styles.

HTML

CSS

This code can be generated by a css gradient generator like the one linked above.

.MyGradientClass
{
    height:200px;
     background-image: linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
    background-image: -o-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
    background-image: -moz-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
    background-image: -webkit-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
    background-image: -ms-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.25, rgb(113,61,62)),
        color-stop(0.63, rgb(147,92,93)),
        color-stop(0.82, rgb(177,120,121))
    );   
}​

Edit:

As Rory mentioned, CSS3 is not fully supported by all modern browsers. However, there are some tools such as PIE CSS to help IE to accept some CSS3 functionality.