How to add background image and gradient background - css

Question

how do i add a background image to a gradient background in css. here my code
input.button-add {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #ffffff;
padding: 4px 4px;
background: -moz-linear-gradient(
top,
#ff2819 0%,
#ff0d0d);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ff2819),
to(#ff0d0d));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #ffffff;
-moz-box-shadow:
0px 1px 1px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:
0px 1px 1px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
box-shadow:
0px 1px 1px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
is it possible and if its possible how?

Answer 1

Why not? Just add as many background-images as you want (gradients are also images) by separating them with commas. Also, specify background-position and background-repeat for all of them.
Here is your code with one image background and one gradient background:
input.button-add {
color: #ffffff;
padding: 4px 4px;
border: 1px solid #ffffff; border-radius: 5px;
display: inline-block;
width: 120px; height: 64px;
box-shadow: 0px 1px 1px rgba(000, 000, 000, 0.5), inset 0px 0px 2px rgba(255, 255, 255, 0.7);
background-image:
url('http://lorempixel.com/16/16'),
-webkit-gradient(linear, left top, left bottom, from(#ff2819), to(#fff));
background-position: 4px center, center center;
background-repeat: no-repeat, no-repeat;
}
<input id="btn" type="button" value="Click Here" class="button-add" />