Background gradients

This is an example page accompanying the article Photoshop 101 - The Gradient Tool. It shows how to apply a background gradient to a web page using a 1px wide image. The source code is below and you can download a copy of the source here.

XHTML


			
			<html>
<head>
    <title>
         Your title here
    </title>  

    <style type="text/css" media="screen">@import "css/screen.css";</style>

</head>
<body>

    <div id="wrapper">
            
            <p>Your content here

    </div>


</body>

</html>

CSS


		body
    {
    font: 62.5%/1.5  "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
    background: url(../images/gradient.jpg) repeat-x;
    color: #333366;    
    text-align:center;
}

#wrapper
    { 
    width:1000px; 
    text-align:left;  
    margin-left:auto; 
    margin-right:auto; 
    background-color: #FFFFFF;
}