Do background-image and background-gradient work together?

HTML & CSS
1

I’d like to place a background image icon on a button that has a gradient. But it looks like only one will work:

With the icon mentioned before the gradient, this will show the gradient, but not the button:

.buttonUndo { color: #000;
width:100%; float:left;background-color:#aaa; 
background-repeat:no-repeat;
background-position:center center;  
background-image:url(../icons/cancel.png); 
background:-webkit-gradient(linear,0% 0%,0% 100%,from(#ffff00),color-stop(3%,#fff380),color-stop(50%,#fbb917),color-stop(51%,#d4a017),color-stop(97%,#af7a17),to(#af7a17));
}

With the icon and Bg color mentioned after the gradient, this will show the icon on a bg color of #aaa, but not the gradient (leaving the BG color above the gradient, the page BG shows through the button):

.buttonUndo { color: #000;
width:100%; float:left;background-color:#aaa; 
background-repeat:no-repeat;
background-position:center center;  
background-image:url(../icons/cancel.png); 
background:-webkit-gradient(linear,0% 0%,0% 100%,from(#ffff00),color-stop(3%,#fff380),color-stop(50%,#fbb917),color-stop(51%,#d4a017),color-stop(97%,#af7a17),to(#af7a17));
}

Is it impossible to put them together, or am I going about this wrong?

2

Hi,

Linear gradaints are images rendered by the browser so if you want more tha ine image you need ot use the multiple background image approach and separate each image with a comma.

e.g.


	background-image:url(../icons/cancel.png),-webkit-gradient(linear,0% 0%,0% 100%,from(#ffff00),color-stop(3%,#fff380),color-stop(50%,#fbb917),color-stop(51%,#d4a017),color-stop(97%,#af7a17),to(#af7a17));

You’d need to repeat that for all the vendor extensions though in separate rules.


background-image:url(../icons/cancel.png),-moz etc.....

You can’t mix vendor extensions in a comma separated list because browsers are ordered to drop out of a rule should they encounter something they don’t understand and go to the next line.

More info here.

3

I learned something today! That works. Thanks for the help.