Bouton submit : une image au dessus d'un dégradé CSS

BOnjour,

Je souhaiterai placer une image (loupe) au dessus d'un dégradé en css3 pour un bouton submit. Comment feriez-vous ?

<form name="recherche" action="#" method="get">
	<input value="Mots clés recherchés..." onfocus="if (this.value=='Mots clés recherchés...') { this.value=''; }" onblur="if (this.value=='') { this.value='Mots clés recherchés...'; }" id="search-header-input" name="textrecherche">
	<input type="submit" name="submit" id="search-header-submit" value="Rechercher">
</form>

#search-header-input {
	width:150px;
	height:17px;
	padding:4px 4px;
	vertical-align:middle;
	border:1px solid #416a89;
	color:#3c3c3c;
}

#search-header-submit {
	height:27px;
	margin-left:-4px;
	vertical-align:middle;
	border:none;
	color:#fff;
	cursor:pointer;

	background:#416a89;	
	background: -moz-linear-gradient(0% 75% 90deg,#214663, #305877);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#305877), to(#214663));

	border-radius:0 3px 3px 0;
	-moz-border-radius:0 3px 3px 0;
	-webkit-border-radius:0 3px 3px 0;
}

Merci pour votre aide

background-image: url('loupe.png'), -moz-linear-gradient(0% 75% 90deg,#aaaaaa, #000000);

Modifié par jb_gfx (22 Apr 2011 - 11:16)

Ah super merci. Je ne savais pas que l'on pouvais les superposer comme cela

Je peux régler les marges de l'image ? Quid si je veux utiliser l'image d'un sprites pour la loupe ?

Le principe est le même pour les marges :

 background: #416a89;
 background-image: url('ok.png'), -moz-linear-gradient(0% 75% 90deg,#305877, #214663); 
 background: url('ok.png'), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#305877), to(#214663));
 background-repeat: no-repeat;
 background-position: 5px 5px, left top;

Pour les sprites je sais pas, j'ai jamais essayé.
Modifié par jb_gfx (22 Apr 2011 - 12:37)