Nous avons parlé de séparation contenu/mise en page avec HTML et CSS ; cette distinction est également valable pour les images
Certaines font partie du contenu, et doivent donc apparaître dans le code HTML grâce à la balise <img>
D'autres sont purement décoratives et n'ont aucune valeur sémantique
ce sont généralement des images de fond ou des icônes
On peut alors les déclarer dans les CSS, avec les attributs de background
On a vu comment mettre une couleur de fond avec background-color
Pour mettre une image de fond : propriété background-image
Valeur : url("chemin/vers/image"),
attention, il s'agit du chemin à partir de l'emplacement du fichier CSS
Par défaut, l'image est répétée pour tapisser tout le bloc.
background-repeat : définit la répétition de l'image de fond
(pour tout tapisser ou non). Valeurs possibles : repeat
repeat-x repeat-y no-repeat
background-position : positionne l'image de fond dans le
bloc
La position se définit avec 2 valeurs (horizontale puis verticale). Ces
valeurs peuvent être en pourcentage, en pixels, en em ou avec les mots clés
left center right pour l'horizontale et top center
bottom pour la verticale
La division a une couleur de fond, une image de fond (transparente) positionnée qui ne se répète pas.
#ubuntu {
background-color: #aaa;
background-image: url("img/logoUbuntu.png");
background-position: bottom right;
background-repeat: no-repeat;
height: 80px;
}
<div id="ubuntu">Ma division Ubuntu</div>
Tout ceci peut être spécifié avec la propriété raccourci
background :
#ubuntu {
background: #aaa url("img/logoUbuntu.png") no-repeat bottom right;
height: 80px;
}
Une image de fond peut être utilisée pour décorer un texte.
Technique classique : utiliser un padding pour décaler le texte par rapport à l'image de fond.
Exemple : les items ont une image de fond qui ne se répète pas et un padding pour décaler le texte.
.liste-icones { margin: 0; padding: 0; list-style: none; }
.liste-icones li { background-position: left center;
background-repeat: no-repeat;
height: 55px;
padding-left: 120px;
line-height: 55px;
}
#firefox { background-image: url("img/logoFirefox.png"); }
#w3c { background-image: url("img/logoW3C.png"); }
<ul class="liste-icones"> <li id="firefox">Mozilla Firefox</li> <li id="w3c">World Wide Web Consortium</li> </ul>
list-style-imagebackground
background-attachment définit si l'image de fond
défile avec la page ou si elle reste fixe
scroll (défaut)fixed (fixé au viewport)
local (fixé au contenu de la boîte)background-size: dimensions (largeur et hauteur), ou bien
cover ou contain. cover force à couvrir toute la surface sans déformer l'image (donc rogne l'image si besoin). contain force l'image à ne pas dépasser de l'élément sans la déformer (l'image ne couvre donc pas forcément tout l'élément).background-clip : définit jusqu'où l'image de fond s'étale. Par défaut c'est le contenu + le padding. Les valeurs possibles sont : border-box, padding-box (valeur par défaut), content-boxbackground-origin: : indique l'origine du repère pour placer l'image. Par défaut l'origine est au coin supérieur gauche de la boîte correspondant au padding. Les valeurs possibles sont : border-box, padding-box (valeur par défaut), content-boxbackground-image.background-position et background-repeat dans le même ordre que les URLs.
background permet aussi de définir un dégradé de couleur linéaire ou radialspan qui est caché en CSS avec la propriété display:
none; (démo)display:none
(voir par exemple cet article de l'époque sur A List Apart)text-indent: -9999px pour cacher le texte en dehors de la fenêtre, et ne nécessite pas de marquage superflu dans le HTML.Rarement utile de nos jours : on n'utilise plus tellement d'images à la place du texte…
Comme le dit cet article tout récent (septembre 2016) : pour afficher du texte, utiliser du texte !
Quelques cas où l'utilisation de ces techniques peut être utile, par exemple pour des icônes
Dans tous les cas, possibilité d'utiliser l'attribut HTML aria-label
pour fournir une « étiquette » à n'importe quel élément, qui sera reconnue par un lecteur d'écran
(voir cet article pour un petit test)
pas idéal pour toutes les situations : n'est pas affiché si on désactive le CSS
Dans les cas où rien ne semble adapté, une solution efficace est de mettre l'image dans le HTML (avec un bon texte alternatif), même si elle ne fait pas partie du contenu
tous les cas de figure sont couverts… Mieux vaut ça que ne rien mettre dans le HTML !
L'accessibilité passe avant l'élégance du code.
Il arrive toujours régulièrement de vouloir cacher du texte aux navigateurs visuels, pour que seuls les lecteurs d'écran et les navigateurs sans CSS le voient
Toujours pas de solution propre…
.visually-hidden {
clip: rect(1px, 1px, 1px, 1px); /* on cache tout l'élément, sauf un carré de 1px */
position: absolute; /* nécessaire pour que « clip » fonctionne */
}
(les éléments de classe visually-hidden seront invisibles en pratique, mais comme ils sont
vraiment « affichés » par le moteur visuel, ils seront forcément lus par le lecteur d'écran)
Attention, parfois cacher du texte « pour de vrai » (avec
display:none) est utile pour l'accessibilité
(voir cet article)