How to create a gradient background for an HTML page

css, html, xhtml

Solution

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <HEAD>
    <LINK href="PathToCss.css" rel="stylesheet" type="text/css">
  </HEAD>
  <BODY class="MyGradientClass">

  </BODY>
</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.

Problem

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: ``` body style="background-color:Powderblue" ``` I know this is not a gradient.

Original source