background : # + background: url simultanément [Résolu]

[petitevero]

Bonjour,
J'ai un bouton J'aime qui fonctionne.



Le code CSS est:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
 
	body { font-family: Georgia, serif; 
        font-size:13px;
}
 
	a.jaime { display: inline-block; color: #646464; text-decoration: none;
        background: url(pouce.gif) 0% 50% no-repeat; padding-left: 20px; }
	a.jaime:hover { text-decoration: underline;  }
	a.jaime-a-voter { font-style: italic; cursor: default; background:   url(coeur.gif) 
        0% 50% no-repeat; padding-left: 20px; }
	a.jaime-a-voter:hover { text-decoration: none; }

Je veux changer l'apparence de celui-ci, en lui rajoutant un tour gris. Mais quand je met un background: #DEDEDE; , l'image url(pouce.gif) disparaît.



Mon code CSS:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
 
	body { font-family: Georgia, serif; 
        font-size:13px;
}
 
	a.jaime { display: inline-block; color: #646464; text-decoration: none; 
        background: url(pouce.gif) 0% 50% no-repeat; padding-left: 20px;
        background: #DEDEDE;
	padding : 0.4em 0.6em 0.4em 0.5em;
	-moz-border-radius : 7px;
	-webkit-border-radius : 7px;
	border-radius : 7px;
 }
	a.jaime:hover { text-decoration: underline;  }
	a.jaime-a-voter { font-style: italic; cursor: default; background: url(coeur.gif) 0% 50% no-repeat; padding-left: 20px; }
	a.jaime-a-voter:hover { text-decoration: none; }

Comment avoir et le tour gris et l'image du pouce en même temps???

Merci

[ornitho13]

Salut,

au lieu de mettre ceci :

Code css :

1
2
3
 
background: url(pouce.gif) 0% 50% no-repeat;
background: #DEDEDE;

fait ceci :

Code css :

1
2
 
background: #DEDEDE url(pouce.gif) 0% 50% no-repeat;

ou ceci :

Code css :

1
2
3
4
5
 
background-image: url(pouce.gif);
background-color: #DEDEDE;
background-repeat: no-repeat;
background-position: 0% 50%;

background est le raccourci pour background-color (couleur de fond), background-image (image de fond), background-repeat (répétition de l'image de fond) et background-position (la position de l'image de fond).

[Bisûnûrs]

Envoyé par ornitho13

background est le raccourci pour [...]

Et background-attachment, dont la valeur par défaut (scroll) est utilisée ici.

[ornitho13]

c'est vrai autant pour moi !

[petitevero]

Bien sûr!!! Cool merci!!!