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.

Vous souhaitez enrichir votre site avec de nouvelles fonctionnalités ? Ensemble, donnons vie à vos idées, simplement et efficacement.

Parlons de vos besoins spécifiques »

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