Background-image et couleurs CSS

Background-image et couleurs CSS (le 21 janvier 2012)

Voici une bonne pratique que je regrette de voir souvent oubliée… y compris par moi-même parfois.

Si dans vos intégrations CSS, vous avez un bloc qui comporte une image de fond, comme par exemple sur ce site #bandeau via :

background: url(top.jpg) 0 0 no-repeat;

Et si ce bloc contient du texte, ayez ceci à l'esprit : si l'image ne se charge pas pour n'importe quelle raison, le texte qui va être dans ce bloc sera sur la couleur de fond héritée. Si vous n'avez pas indiqué de couleur de fond, il est possible que la couleur héritée pose un problème d'accessibilité.

Voici l'exemple sur mon site, simulé avec Firebug :


Mon site sans l'image du bandeau chargée, avec un problème de couleur

Comme vous pouvez le voir, le contraste n'est vraiment pas fameux.

C'est d'autant plus énervant que c'est très simple à régler, il suffit de spécifier la bonne couleur de fond dans la règle CSS qui appelle l'image de fond de votre bloc. Dans mon cas :

background:#EEEBDA url(top.jpg) 0 0 no-repeat; (j'ai juste rajouté une couleur de fond)

Si je reprends l'exemple sur mon site, simulé avec Firebug :


Mon site sans l'image du bandeau chargée avec la couleur de fond retouchée

Comme vous pouvez le voir, c'est bien meilleur ainsi.

Pensez-y : c'est très simple à prévoir, et cela peut éviter de fâcheux désagréments.

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1447

3 commentaires

Posté par Victor Brito le 21/01/2012 à 20:39:56
Un très bon rappel de bon sens, valable également lorsqu'on utilise les dégradés CSS 3.
Posté par Vivien Blasquez le 25/01/2012 à 21:47:05
C'est en effet très simple à mettre en place, j'avais eu le même problème avec mon portfolio il y a quelque temps. Bonne petite piqûre de rappel.
Posté par jean le 03/02/2012 à 18:28:19
Un petit conseil bien utile lorsqu'on débute en intégration.

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.