How to add a background gradient image from top to bottom?

body {
    color:#999; 
    background-color:#000; 
    font-family:"Helvetica Neue", Helvetica, arial, sans-serif; 
    font-size:11px; 
    line-height:1.8em;
    background-image: url(../images/bck.jpg); 
    paddi开发者_如何学Gong:0; 
    margin:0;
}

How can i modify it to add a gradient background image from the top to bottom of the site?

---

/* IE10 */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

Edit it as it suits you.

---

Mob has a good answer for CSS3. However, if you want to use an image to support older browsers, but want it to repeat in only a certain direction, just use repeat-x or repeat-y, as follows:

background: #000 url('../images/bck.jpg') repeat-x;

If you'd rather keep your rules separate, just add:

background-repeat:repeat-x;

to your rules. You can also use 'repeat-y' or 'no-repeat', depending upon your needs. As you saw already, the default behavior is to repeat-all. If you are not worried about legacy support, Mob's answer is a good fit, as it doesn't rely on a fixed image size, and it will always span the proper distance, regardless of the height of your content.