Gradient and Image on Form Submit button?

Question

I was wondering if there is a way to have an image on a submit button while preserving the gradient.

Heres the gradient I have and am using.

But I want to add an image as well, like below. But by adding the image it overrides the gradient.

Heres the code I use to add the button.

background-position:  center left;
background-image: url(../images/icons/cross.png);
background-repeat: no-repeat;

Below is photoshoped version of what I want, as you can see both gradient and image are present.

Any ideas? Obviously you can't add an image to a submit button via html? Or can you?

Update

Heres the snippets of the code

Gradient CSS

.whitegrad
{
background:#fefefe;
background: -moz-linear-gradient(top,  #fefefe 0%, #e3e3e3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#fefefe), color-stop(100%,#e3e3e3));
   /* etc etc */
}

HTML for the form

<form action='' method='post' class='addtofavorites' >
    <input type='hidden' class='atf_video_id' name='atf_video_id' value='' />
    <input class='whitebtn whitegrad rndrgt' type='submit' value='Add to Favorites' />

</form>

Answer 1

Why would you use the image of a cross, when you have an actual text version of that available to you?

You could either include the '+' within the button text:

<button type="submit">+ Add to Favourites</button>

Or use CSS-generated content to add it:

<button type="submit">Add to Favourites</button>

button:before {
    content: '+ ';
}

JS Fiddle demo.

Answer 2

The <button> tag lets you put HTML inside of it. You can add onclick + onkeypress event handlers to call submit() on the form. Then, you can keep the background gradient on the <button>.

You can also use multiple backgrounds with CSS3, but it isn't well-supported yet.