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:

HTML Code:
.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):

HTML Code:
.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?