Gradient backgrounds can give depth and perspective to your site, and appear most pleasing when grading from dark at the top to lighter at the bottom. For gradient backgrounds, you need a default color as a fallback and three styles to cover the main browser types. The gradient will fill the background of the page competely regardless of how far it scrolls.

1. Add the following rule to your core CSS style sheet (the rule shown applies the color #024668 at the top and #006699 at the bottom as an example):
   
   body {
   background: #006699; /* default background color */
   background: -moz-linear-gradient(top, #024668, #006699); /* for Firefox: */
   background: -webkit-gradient(linear, left top, left bottom, from(#024668), to(#006699)); /* for Chrome and Safari:*/
   filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#024668', EndColorStr='#006699', GradientType=0); /* for Microsoft Internet Explorer */
   background-attachment: fixed;
   webkit-background-size: cover;
   moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   }
    
2. For further exploration into CSS gradients, go to ColorZilla’s Ultimate CSS Gradient Generator.