2010-08-11 5 views
1

J'ai un problème bizarre. Dans l'esprit d'essayer d'écrire DRYer, code plus court, je veux supprimer 'no-repeats' de mes styles h3 individuels et le faire avec une seule déclaration. Voici une version d'exemple du code qui échoue. Le h3 dans #c n'arrête pas de répéter à moins que je l'ai défini comme je l'ai fait pour #a et #b.
J'ai essayé de remplacer background-repeat: none par: no-repeat, mais pas de chance. Merci d'avance pour toute aide!Pourquoi ne puis-je pas arrêter background-repeat: de répéter?

.class > h3 
    { 
     float:left; 
     height:21px; 
     width:200px; 
     margin-bottom:10px; 
    } 

    #a > h3 {background:url(a.png) no-repeat;} 
    #b > h3 {background:url(b.png) no-repeat;} 
    #c > h3 {background:url(c.png);} 

    /* EDIT: this code does not work (even after applying Thom's answer)  
    h3 {background-repeat:none;} 
    */ 

    h3 {background-repeat:no-repeat;} 

Répondre

5

background est une déclaration abrégée qui définit un certain nombre de valeurs. Il annule votre déclaration de background-repeat. Remplacez la déclaration background de #c > h3 à la place par background-image.

+0

Eh bien qui a tout réglé! Merci Thom. J'avais le sentiment que c'était quelque chose dans ce sens. –

3

Pourquoi pas background-repeat: aucun travail?

Parce qu'il est nommé no-repeat :)

+0

Avez-vous lu la question? «J'ai essayé de remplacer background-repeat: none avec: no-repeat, mais pas de chance» ou voulez-vous dire {no-repeat: none} ou quelque chose comme ça? J'ai pris le background-repeat: aucun dans le fichier http://html5boilerplate.com/ css de Paul Irish, donc ça doit être utile. –

+0

background-repeat: rien ne fonctionne bien maintenant que j'ai implémenté la réponse de Thom. Peut-être que ma prochaine question devrait être "pourquoi est-ce que le background-repeat: none fonctionne?" lol. –

+0

On dirait que la référence de w3 schools css est d'accord avec vous. http://www.w3schools.com/css/pr_background-repeat.asp. Maintenant, je ne sais pas lequel utiliser :-( –

0

OK, background-repeat: none Ce n'est pas une propriété valide. Vous avez répétition, no-repeat, répétition x, repeat-y et Hériter qui hériter des biens de l'élément parent, mais aucune n'existe pas. Peut-être que cela fonctionnera avec des navigateurs comme Chrome et Firefox qui essaient de comprendre ce que vous voulez dire, mais IE est très pointilleux avec ce genre de choses.

Questions connexes