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.

Pour développer votre projet WordPress ou Woocommerce, faites appel à mon expertise pour réaliser un site rapide, performant et fonctionnel.

Contactez-moi

Si vous avez trouvé une faute d’orthographe, informez-nous en sélectionnant le texte en question et en appuyant sur Ctrl + Entrée s’il vous plaît.

Articles en rapport:

CSS : afficher correctement une image en arrière-plan

par Matt Lecture: 1 min
0

Pin It on Pinterest

Share This

Spelling error report

The following text will be sent to our editors: