I want to add a background color only to part of my div

Gradients DO NOT necessarily have a fade, that is a misconception, let’s say that you want your div to be 70% red (solid) starting from the top, your CSS will be.

background-image: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%)

Two Methods:

With Gradients:

div{    
    width:200px;
    height:200px;
    margin:50px auto;
    border:4px solid rgb(50,50,50);
    background-image: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%);
    background-image: -webkit-linear-gradient(top, red, red 70%, transparent 70%, transparent 100%)  
}

Fiddle -> http://jsfiddle.net/QjqYt/

Without Gradients

div{
    position:relative;
    z-index:1;
    width:200px;
    height:200px;
    margin:50px auto;
    border:4px solid rgb(50,50,50);  
}

div:before{
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:100%;
    height:70%;
    content:"";
    background-color:red;
}

Fiddle -> http://jsfiddle.net/6cKZL/1/