combine background image and css gradient

In my previous posts, i explained how we can create gradient without any images. In this , i am going to explain combine background image and css gradient.

Originally, I started with the following css

.button{
    width:130px;
    padding:20px;
    margin:10px;
}
.example1{
    background:url(IMG URL) no-repeat;
    /* for firefox 3.6+ */
    background-image: -moz-linear-gradient(top,  #CBf6FA,  #A6DD9F);
    /* for webkit browsers */ 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#CBf6FA),to(#A6DD9F)); 
}

<div class="button example1">Button</div>

It will give the out like below:

It was close but not quite what I wanted. My background image was being hidden behind gradient. The problem here is gradient is specified as a background-image, which means they override any previously declared background-image.

So, here I went with few minor changes to my CSS by specifying background color as a fall-back for browsers that don't support CSS3 gradients.

.button{
    width:130px;
    padding:20px;
    margin:10px;
}
.example1{
    background-color:#CBf6FA;
    /* for firefox 3.6+ */
    background-image: url(IMG URL), -moz-linear-gradient(top,  #CBf6FA,  #A6DD9F);

    /* for webkit browsers */ 
    background-image: url(IMG URL), -webkit-gradient(linear, left top, left bottom, from(#CBf6FA),to(#A6DD9F));

    /* IE 10 */
    background-image: url(IMAGE_URL), -ms-linear-gradient(top, #CBf6FA, #A6DD9F);

    /*  Opera 11.10+ */
    background-image: url(IMAGE_URL), -o-linear-gradient(top, #CBf6FA, #A6DD9F); 

    /* make IE happy */
     filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#CBf6FA, endColorstr=#A6DD9F);
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#CBf6FA, endColorstr=#A6DD9F)";
   
    background-position: 4px 50%, 0 0;
    background-repeat: no-repeat;

}

<div class="button example1">Button</div>

thats it!