Il m’est arrivé plusieurs fois de ne pas pouvoir afficher une image en arrière-plan (background image) en CSS et cela tout simplement parce que le code CSS doit être écrit dans un certain ordre, notamment lorsque l’on utilise la syntaxe courte.
Solution : du code CSS ordonné
Alors voilà : imaginons que nous voulons créer une DIV ayant pour identifiant “banner”. Nous voulons que cette DIV affiche l’image background.png.
Il faut commencer par mettre l’URL de l’image entre guillements puis la position horizontale, ensuite la position verticale et enfin la répétition de l’image ou non.
Exemple en utilisant la propriété background (short-hand syntax) :
#banner {
background:url("background.png") center top no-repeat;
}
Cela peut sembler trivial mais j’ai mis des heures à comprendre pourquoi un de mes bouts de code ne fonctionnait pas.
Une fois que les directives sont dans le bon ordre, tout apparaît comme prévu.
Si vous avez trouvé une faute d’orthographe, veuillez nous en informer en sélectionnant le texte en question et en appuyant sur Ctrl + Entrée.
Vous souhaitez réaliser un nouveau projet WordPress ou WooCommerce, ajouter de nouvelles fonctionnalités, ou améliorer les performances de votre site?
Parlons de votre projet »