Text
Background gradient + Background image with CSS3

And this is the final result:
If we want to make a button (for example) with background gradient plus a concrete image we can do the following:
.blue-button {float:left; text-align:center; padding:6px 38px 6px 15px;border:1px solid #A9C5D6; color:white; font:bold 14px Arial; height:18px; text-decoration:none; margin-
/* text shadow */
text-shadow:1px 1px 0px #6397B1;
/* border*/
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
background: url(../images/common/bg-btn-arrow.png) right 1px no-repeat;
background:
url(../images/common/bg-btn-arrow.png) right 1px no-repeat,
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.19, rgb(142,185,206)),
color-stop(0.6, rgb(172,207,226))
);
background:
url(../images/common/bg-btn-arrow.png) right 1px no-repeat,
-moz-linear-gradient(
center bottom,
rgb(142,185,206) 19%,
rgb(172,207,226) 60%
);
}
This is the original arrow:

And this is the final result: