Vous avez deux arrière-plans pour un élément de menu actif?

Question

Salut J'ai un menu dynamique où les éléments ul li changent de largeur en fonction du texte défini dans le CMS (Joomla). Ils veulent que l'élément de menu, sur la souris, ait 1. une image de fond répétée et 2. une image placée en haut (http://screencast.com/t/Zjk4YTJmNGQ).

Maintenant, je suis génial pour faire l'image de fond répétée sur une souris et ce serait génial, mais je ne suis pas sûr de savoir comment obtenir ces deux images dans une déclaration CSS.

Toute aide serait grandement appréciée, comme je l'ai pas appris cette technique encore :(

Answer 1

Firefox 3 et les navigateurs Webkit en charge plusieurs arrière-plans.

background: url(image1.png), url(image2.png); 
background-repeat: repeat-x, no-repeat; 
background-position: top right, 90% 5px; 

Vous pouvez également essayer d'obtenir ce travail en utilisant le. après pseudo-classe

.menu li { 
    position: absolute; 
    background: url(image1.png); 
} 

.menu li:after { 
    content: '<img src="image2.png">'; 
} 

Vous pouvez trouver un bel exemple ici: http://s3.amazonaws.com/nettuts/690_textGradients/index.html

Answer 2

Si c'est un menu, le balisage pertinent devrait probablement ressembler à <li><a href="…">…</a></li> - c'est deux éléments, ce qui est beaucoup pour deux images de fond.