Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a gradient background for an HTML page

Tags:

html

css

xhtml

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.

like image 471
alpha_nom Avatar asked Dec 28 '22 02:12

alpha_nom


1 Answers

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.

like image 66
Josh Mein Avatar answered Jan 15 '23 17:01

Josh Mein