<image>

Le type de donnée CSS <image> représente une image en deux dimensions. Il existe deux types d'images en CSS : les images statiques (souvent utilisées via une URL (cf. <url>)), et les images générées dynamiquement comme les dégradés (cf. <gradient>) ou les images construites à partir de fragments de l'arbre du DOM (element). D'autres fonctions peuvent être utilisées pour créer des images comme image(), image-set et cross-fade.

Les images peuvent être utilisées pour de nombreuses propriétés CSS dont, par exemple, background-image, border-image, content, list-style-image et cursor.

Les types d'images

Le CSS permet de manipuler différentes sortes d'images :

  • les images avec des dimensions intrinsèques, qui ont une taille propre, comme une image au format JPEG ou PNG (ou dans un autre format matriciel) qui possède des dimensions fixes.
  • les images avec plusieurs dimensions intrinsèques, qui existent sous différentes dimensions dans un même fichier, comme certains formats .ico. Dans ce cas, les dimensions intrinsèques seront celles de la plus grande image en surface, et ayant le ratio le plus proche de la boîte englobante.
  • les images sans dimensions intrinsèques avec un ratio intrinsèque, entre la largeur et sa hauteur, comme certaines images vectorielles, au format SVG par exemple.
  • les images n'ayant ni dimensions intrinsèques, ni ratio intrisèque, comme un dégradé CSS par exemple.

Le CSS détermine la taille concrète de l'objet en utilisant ces dimensions intrinsèques, la taille spécifiée définie par les propriétés CSS comme width, height ou background-size, et la taille par défaut de l'objet définie en fonction de la propriété utilisée :

Type d'objet Taille par défaut de l'objet
background-image La taille de la zone de positionnement de l'arrière-plan
list-style-image La taille d'un caractère de 1em
border-image-source La taille de la zone de bordure de l'élément
cursor La dimension correspondant à la taille d'un curseur sur le système utilisé
mask-image ?
shape-outside ?
mask-border-source ?
symbols pour @counter-style Une fonctionnalité en cours de discussion. Si elle est prise en charge, la taille utilisée sera celle des curseurs utilisés par le système.
content avec les pseudo-éléments ::after et ::before Un rectangle de 300px × 150px

La taille concrète de l'objet est calculée selon l'algorithme suivant :

  • si la taille spécifié définit à la fois la largeur et la hauteur, ces valeurs sont utilisées comme la taille concrète de l'élément.
  • si la taille spécifiée définit soit la hauteur soit la largeur, la valeur manquante est déterminée grâce au ratio intrinsèque s'il existe ou les dimensions intrisèques si la valeur spécifiée y correspond ou la taille par défaut de l'objet pour la dimension manquante.
  • si la taille spécifiée ne définit ni hauteur ni largeur, la taille concrète de l'objet est calculée de manière à ce que le ratio intrinsèque soit conservé et que la taille par défaut de l'objet ne soit pas dépassée. Si l'image n'a pas de ratio intrinsèque, le ratio intrinsèque de l'objet auquel il s'applique est utilisé ; si l'objet n'en possède pas, la hauteur ou la largeur manquante est prise depuis la taille par défaut de l'objet.

Les images peuvent être utilisées pour de nombreuses propriétés CSS comme background-image, border-image, content, list-style-image ou cursor.

Note : tous les navigateurs ne supportent pas n'importe quel type d'image sur n'importe quelle propriété. Voir la section compatibilité des navigateurs pour une liste explicative.

Syntaxe

Un type de donnée CSS <image> peut représenter un type parmi les suivants :

  • une image dénotée par le type de donnée CSS <url> et la fonction url() ;
  • une valeur CSS <gradient> (représentant un dégradé) ;
  • une partie de la page, définie par la fonction element ;
  • une image, un fragment d'image ou une couleur définie grâce à la fonction image() ;
  • une fusion de deux ou plusieurs images avec la fonction cross-face
  • une image choisie parmi un ensemble d'images (selon leurs résolutions, l'appareil et la connexion utilisés) grâce à la fonction image-set().

Exemples

Voici des exemples valides d'images :

url(test.jpg)              /* La fonction url() fonctionne tant que test.jpg est bien une image */
linear-gradient(blue, red) /* Un dégradé (<gradient>) */
element(#colonne3)         /* Utilisation d'un élément de la page via la fonction element(),
                              si colonne3 est bien un identifiant CSS existant. */
image(ltr 'arrow.png#xywh=0,0,16,16', red) 
                           /* Une section de 16x16 pixels de l'image arrow.png et qui démarre au coin
                              supérieur gauche de l'image et qui sera utilisée si arrow.png est à un
                              format pris en charge. Sinon, ce sera un fond rouge qui sera utilisé.
                              Si la langue est écrite de gauche à droite, l'image sera inversée
                              horizontalement. */
cross-fade(20% url(vingt.png), url(quatrevingt.png));
                           /* Deux images superposées où « vingt » est 20% 
                              opaque et « quatrevingt » compose les 80% 
                              restants. */
image-set('test.jpg' 1x, 'text-2x.jpg' 2x);
                           /* Un ensemble d'images avec différentes résolutions. */

Voici des exemples invalides :

nourl.jpg            /* Le fichier de l'image doit être ciblé via la fonction url(). */
url(report.pdf)      /* Le fichier référencé par la fonction url() doit être une image. */
element(#fakeid)     /* Ne fonctionne pas si 'fakeid' n'est pas un identifiant existant. */
image(z.jpg#xy=0,0)  /* L'indicateur de fragment doit avoir la forme xywh=#,#,#,# */
image-set('chat.jpg' 1x, 'chien.jpg' 1x) /* Chaque image doit avoir une résolution différente */

Accessibilité

Les navigateurs ne fournissent pas d'information aux outils d'assistance pour les images d'arrière-plan. Cela est particulièrement important pour les lecteurs d'écran car ces derniers ne pourront pas annoncer la présence de ces informations aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.

Spécifications

Spécification État Commentaires
CSS Images Module Level 3
La définition de '<image>' dans cette spécification.
Candidat au statut de recommandation Définition initiale. Avant CSS3, il n'existait pas de type défini de façon explicite pour les images. Celles-ci pouvaient uniquement être utilisées via la notation fonctionnelle url().
CSS Images Module Level 4
La définition de '<image>' dans cette spécification.
Version de travail Ajout de element(), image(), image-set(), conic-gradient, repeating-conic-gradient() et image-resolution.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
<image>Chrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 10Opera Support complet 2Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 11Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
cross-fade()
Expérimentale
Chrome Support complet 17
Préfixée Notes
Support complet 17
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Supports the original dual-image with percentage implementation only.
Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Support complet 15
Préfixée Notes
Support complet 15
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Supports the original dual-image with percentage implementation only.
Safari Support complet 10
Notes
Support complet 10
Notes
Notes Supports the original dual-image with percentage implementation only.
Support complet 5.1
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Supports the original dual-image with percentage implementation only.
WebView Android Support complet ≤37
Préfixée Notes
Support complet ≤37
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Supports the original dual-image with percentage implementation only.
Chrome Android Support complet 18
Préfixée Notes
Support complet 18
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Supports the original dual-image with percentage implementation only.
Firefox Android Aucun support NonOpera Android Support complet 14
Préfixée Notes
Support complet 14
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Supports the original dual-image with percentage implementation only.
Safari iOS Support complet 9.3
Notes
Support complet 9.3
Notes
Notes Support for the original dual-image with percentage implementation only.
Support complet 5
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Supports the original dual-image with percentage implementation only.
Samsung Internet Android Support complet Oui
Préfixée Notes
Support complet Oui
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Support for the original dual-image with percentage implementation only.
element()
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 57
Préfixée
Support complet 57
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Aucun support 29 — 57
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes -moz-element() is limited to background-image, background, border-image and border-image-source.
Aucun support 4 — 29
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes -moz-element() is limited to background-image and background.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 60
Préfixée
Support complet 60
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Aucun support 29 — 60
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes -moz-element() is limited to background-image, background, border-image and border-image-source.
Aucun support 4 — 29
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes -moz-element() is limited to background-image and background.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
<gradient>Chrome Support complet 26
Support complet 26
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Préfixée
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Firefox Support complet 3.6
Notes
Support complet 3.6
Notes
Notes Gradients are limited to background-image, border-image, and mask-image.
IE Support complet 10
Préfixée
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Support complet 12.1
Support complet 12.1
Aucun support 11 — 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet 6.1
Support complet 6.1
Support complet 5.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet ≤37
Support complet ≤37
Support complet ≤37
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 26
Support complet 26
Support complet 18
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 4
Notes
Support complet 4
Notes
Notes Gradients are limited to background-image, border-image, and mask-image.
Opera Android Support complet 12.1
Support complet 12.1
Aucun support 11 — 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet 7
Support complet 7
Support complet 6
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet Oui
image()
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support Non
Notes
Aucun support Non
Notes
Notes The -moz-image-rect() function supports fragments as of Firefox 4.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes The -moz-image-rect() function supports fragments as of Firefox 4.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
image-set()
Expérimentale
Chrome Support complet 21
Préfixée
Support complet 21
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Aucun support NonFirefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1107646.
IE Aucun support NonOpera Support complet 15
Préfixée
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support partiel 6
Préfixée Notes
Support partiel 6
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Support for url images only and x is the only supported resolution unit. See bug 160934.
WebView Android Support complet 4.4
Préfixée
Support complet 4.4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 25
Préfixée
Support complet 25
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1107646.
Opera Android Support complet 14
Préfixée
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support partiel 6
Préfixée Notes
Support partiel 6
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Support for url images only and x is the only supported resolution unit. See bug 160934.
Samsung Internet Android Support complet 4.0
Préfixée
Support complet 4.0
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi