promotion

Friday, January 27, 2012

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!

2 comments:

  1. I'm not sure about your IE fix. I'm trying to do the same thing, but the IE filter /*make IE happy */ displays the gradient, but not the background image.

    ReplyDelete
    Replies
    1. can you tell me which IE(IE 6/7/8/9) is that?

      Delete