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

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;
}
Code language: CSS (css)

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.

Votre site mérite performance et fiabilité. Grâce à mon expérience, je vous aide à optimiser WordPress/WooCommerce pour des résultats visibles.

Voyons comment améliorer votre site »

Matt

Développeur certifié WordPress & WooCommerce chez Codeable, administrateur système et enseignant-chercheur, je mets mon expertise au service de vos projets web.

Ma priorité : des sites performants, fiables et sécurisés, pensés pour offrir la meilleure expérience utilisateur. J’accompagne chaque client avec écoute et pédagogie, pour transformer vos idées en solutions concrètes et durables.

Profitez de solutions WordPress et WooCommerce sur-mesure, pensées pour optimiser durablement votre site.
Explorez les leviers pour booster l’impact de votre site web.

Opinions