background : # + background: url simultanément

Version imprimable

2 pièce(s) jointe(s)

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

http://paul-andre.freehostia.com/image2.jpg

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.

http://paul-andre.freehostia.com/image1.jpg

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

02/03/2011, 08h45
ornitho13
Salut,

au lieu de mettre ceci :
Code:

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

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

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).
02/03/2011, 09h29
Bisûnûrs

Citation:

Envoyé par ornitho13

background est le raccourci pour [...]

Et background-attachment, dont la valeur par défaut (scroll) est utilisée ici.
02/03/2011, 09h38
ornitho13

c'est vrai autant pour moi !
02/03/2011, 18h07
petitevero

Bien sûr!!! Cool merci!!!:ccool: