---
title: image()
slug: orphaned/Web/CSS/image()
tags:
  - CSS
  - Fonction
  - Reference
translation_of: Web/CSS/image()
original_slug: Web/CSS/image()
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>

<p>La fonction CSS <code><strong>image</strong></code><strong><code>()</code></strong> définit une image (type {{cssxref("&lt;image&gt;")}}) à la façon du type {{cssxref("&lt;url&gt;")}} mais avec des fonctionnalités supplémentaires comme la définition de la directionnalité, la possibilité d'indiquer une image par défaut si l'image initiale n'est pas prise en charge, l'affichage d'une partie de l'image ou le choix de la couleur à utiliser par défaut si aucune des images indiquées ne peut être affichée.</p>

<div class="blockIndicator note">
<p><strong>Note :</strong> Attention à ne pas confondre cette notation fonctionnelle CSS avec le constructeur {{DOMxRef("HTMLImageElement/Image", "<code>Image()</code> pour <code>HTMLImageElement</code>","",1)}}.</p>
</div>

<h2 id="Syntax" name="Syntax">Syntaxe</h2>

{{CSSSyntax("image()")}}

<h3 id="Paramètres">Paramètres</h3>

<dl>
 <dt><code>image-tags</code>{{optional_inline}}</dt>
 <dd>La directionnalité de l'image, la valeur <code>ltr</code> pourra être utilisée afin d'indiquer que l'image est orientée de gauche à droite et la valeur <code>rtl</code> indiquera de droite à gauche.</dd>
 <dt><code>image-src</code>{{optional_inline}}</dt>
 <dd>Zéro, une ou plusieurs URL ({{CSSxRef("&lt;url&gt;")}}) ou chaînes de caractères ({{CSSxRef("&lt;string&gt;")}}) indiquant des sources d'image et qui contiennent éventuellement des identifiants de fragment.</dd>
 <dt><code>color</code>{{optional_inline}}</dt>
 <dd>Une couleur par défaut. Cette couleur sera utilisée par défaut si aucune image n'est trouvée ou prise en charge parmi les images fournies via <code>image-src</code>.</dd>
</dl>

<h3 id="Gestion_de_la_directionnalité">Gestion de la directionnalité</h3>

<p>Le premier paramètre de la fonction <code>image()</code> est optionnel et indique la directionnalité de l'image. Lorsque ce paramètre est utilisé et que l'image est utilisée au sein d'un élément ayant la directionnalité opposée, l'image sera renversée horizontalement pour les modes d'écriture horizontaux. Si ce paramètre n'est pas utilisé, l'image ne sera pas renversée.</p>

<h3 id="Fragments_dimage">Fragments d'image</h3>

<p>Une différence fondamentale entre <code>url()</code> et <code>image()</code> est la possibilité d'ajouter un identifiant de fragment d'image. Un identifiant de fragment est donné par : un point de départ défini par ses coordonnées x et y et par une largeur et une hauteur. Cela permet de ne sélectionner qu'une section de l'image source. La section ainsi définie devient une image à part entière aux yeux du moteur de rendu.</p>

<pre class="brush:css notranslate">background-image: image('monimage.webp#xywh=0,20,40,60');</pre>

<p>Avec l'exemple précédent, l'image d'arrière-plan utilisée sera une section de l'image <em>myImage.webp</em> commençant à la coordonnée (0px,20px), ayant une largeur de 40px et une hauteur de 60px.</p>

<p>La syntaxe pour l'identifiant de fragment <code>#xywh=#,#,#,#</code> prend quatre arguments numériques séparés par des virgules. Les deux premiers arguments représentent les coordonnées X et Y du point de départ pour la section, la troisième valeur correspond à la largeur de la portion et la quatrième correspond à la hauteur. Par défaut, ces coordonnées et ces mesures sont exprimées en pixels. La <a href="https://www.w3.org/TR/media-frags/#naming-space">définition de la dimension spatiale de la spécification des média</a> indique que les pourcentages peuvent également être pris en charge.</p>

<pre class="brush: css notranslate">xywh=160,120,320,240        /* créera une image sur 320x240 à x=160 et y=120 */
xywh=pixel:160,120,320,240  /* créera une image sur 320x240 à x=160 et y=120 */
xywh=percent:25,25,50,50    /* créera une image sur 50%x50% à x=25% et y=25% */</pre>

<p>Les fragments d'image peuvent également être utilisés avec la notation <code>url()</code>. La syntaxe <em>#xywh</em>=#,#,#,# est rétrocompatible car elle sera ignorée si elle n'est pas comprise et elle ne rendra pas la source invalide si elle est utilisée avec la notation <code>url()</code>. Si le navigateur ne prend pas en charge les notations pour les fragments de média, il ignorera la définition du fragment et affichera l'image intégralement.</p>

<p>Les navigateurs qui prennent en charge <code>image()</code> prennent également en charge la notation pour les fragments. Ainsi si le fragment fourni est invalide dans la source pour <code>image()</code>, l'image résultante sera considérée invalide.</p>

<h3 id="Couleur_par_défaut">Couleur par défaut</h3>

<p>Si les deux derniers arguments sont utilisés et dans le cas où les images fournies sont invalides, la fonction <code>image()</code> génèrera une image à partir de la couleur indiquée. Cette couleur apparaîtra uniquement dans le cas où l'image source n'est pas utilisable. Ainsi, si on a choisi une image sombre sur laquelle afficher du texte clair, autant prévoir une couleur sombre au cas où afin de garantir un contraste acceptable.</p>

<p>Il est possible de ne pas définir d'image source et de ne passer qu'une couleur comme argument.</p>

<p>À la différence de {{cssxref("background-color")}} dont la couleur sera placée derrière l'ensemble des images d'arrière-plan, on peut utiliser <code>image()</code> afin de placer des couleurs sur d'autres images.</p>

<p>La taille du rectangle de couleur appliqué peut être défini grâce à la propriété {{cssxref("background-size")}}. Ce comportement diffère de <code>background-color</code> qui définit une couleur pour couvrir l'ensemble de l'élément. <code>image(color)</code> et <code>background-color</code> pourront être déplacés grâce aux propriétés {{cssxref("background-clip")}} et {{cssxref("background-origin")}}.</p>

<h2 id="Examples" name="Examples">Exemples</h2>

<h3 id="Utiliser_des_images_prenant_en_compte_la_directionnalité">Utiliser des images prenant en compte la directionnalité</h3>

<pre class="brush: html notranslate">&lt;ul&gt;
  &lt;li dir="ltr"&gt;La puce est une flèche pointant à droite et située à gauche.&lt;/li&gt;
  &lt;li dir="rtl"&gt;La puce est la même flèche mais renversée pour pointer à gauche.&lt;/li&gt;
&lt;/ul&gt;</pre>

<pre class="brush: css notranslate">ul {
  list-style-image: image(ltr 'rightarrow.jpg');
}</pre>

<p>Pour les éléments de la liste allant de gauche à droite (ceux avec <code>dir="ltr"</code> ou qui héritent de cette direction depuis leur ancêtre), l'image pour la puce sera utilisée telle quelle. Les éléments de la liste avec <code>dir="rtl"</code> (que ce soit explicitement défini comme ici ou que cette direction provienne de la direction par défaut du document, par exemple un document en arabe ou en hébreu), l'image sera affichée à droite et sera renversée horizontalement (de la même façon qu'avec <code>transform: scalex(-1)</code>). Le texte sera également affiché de gauche à droite.</p>

<p>{{EmbedLiveSample("Utiliser_des_images_prenant_en_compte_la_directionnalité","100%","200")}}</p>

<div>
<h3 id="Afficher_une_partie_sprite" name="Afficher_une_partie_sprite">Afficher une partie (<em>sprite</em>)</h3>

<pre class="brush: html notranslate">&lt;div class="box"&gt;Vous pouvez survoler cet élément pour voir un autre curseur.&lt;/div&gt;
</pre>

<pre class="brush:css notranslate">.box:hover {
   cursor: image("https://mdn.mozillademos.org/files/16411/sprite.png#xywh=32,64,16,16");
}</pre>

<p>Lorsque l'utilisateur survole la boîte, le curseur changera pour afficher une section d'un <em>sprite</em> mesurant 16 pixels de large et de haut et commençant à x=32 et y=64 sur l'image totale.</p>

<div>{{EmbedLiveSample("Afficher_une_partie_sprite","100%","100")}}</div>
</div>

<div>
<h3 id="Fournir_des_images_alternatives">Fournir des images alternatives</h3>

<pre class="brush:css notranslate">.help::before {
  content: image("try.webp", "try.svg", "try.gif");
}</pre>

<p>Dans cet exemple, le navigateur affichera une image comme contenu généré précédent tous les éléments avec la classe <code>help</code>. Si le navigateur prend en charge le format WebP, ce sera <code>try.webp</code> qui sera affichée, sinon si le navigateur prend en charge le format SVG, ce sera <code>try.svg</code> qui sera affichée et sinon, ce sera <code>try.gif</code> qui sera utilisée.</p>
</div>

<div>
<h3 id="Placer_une_couleur_sur_une_image_en_arrière-plan">Placer une couleur sur une image en arrière-plan</h3>

<pre class="brush:css notranslate">.quarterlogo {height: 200px; width: 200px; border: 1px solid;}</pre>

<pre class="brush:css notranslate">.quarterlogo {
  background-image:
    image(rgba(0, 0, 0, 0.25)),
    url("https://mdn.mozillademos.org/files/12053/firefox.png");
  background-size: 25%;
  background-repeat: no-repeat;
}</pre>

<pre class="brush: html notranslate">&lt;div class="quarterlogo"&gt;If supported, a quarter of this div has a darkened logo&lt;/div&gt;
</pre>

<p>Dans l'exempel précédent, on placera un masque noir semi-transparent sur le logo Firefox utilisé comme image d'arrière-plan. Si on avait utilisé la propriété <code>background-color</code> à la place, la couleur aurait été placée sous le logo et non sur lui. De plus, le conteneur entier aurait eu cette couleur en arrière-plan. Avec <code>image()</code> et {{cssxref("background-size")}} (tout en empêchant l'aimge de se répéter grâce à {{cssxref("background-repeat")}}), le voile noir ne couvrira qu'un quart du conteneur.</p>

<div>{{EmbedLiveSample("Placer_une_couleur_sur_une_image_en_arrière-plan","100%","220")}}</div>
</div>

<h2 id="Accessibilité">Accessibilité</h2>

<p>Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan acr les navigateurs n'extraient pas d'informations du contenu visuel des images. Si l'image contient des informations essentielles à la compréhension du document, il faudra décrire ces informations de façon sémantique dans le document afin, entre autres, que les outils d'assistance puissent transmettre les informations aux utilisateurs.</p>

<ul>
 <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendres les règles WCAG 1.1</a></li>
 <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères de succès 1.1.1 - WCAG 2.0</a></li>
</ul>

<p>Cette fonctionnalité permet d'améliorer l'accessibilité en fournissant une couleur par défaut lorsque l'image n'est pas chargée. Bien qu'il soit conseillé d'avoir une couleur d'arrière-plan ({{cssxref("background-color")}}) pour chaque image d'arrière-plan ({{cssxref("background-image")}}), <code>image()</code> pourra être utile afin de définir une couleur uniquement utilisée lorsqu'une image ne charge pas.</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS4 Images", "#image-notation", "image()")}}</td>
   <td>{{Spec2('CSS4 Images')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>

<p>{{Compat("css.types.image.image")}}</p>

<h2 id="See_also" name="See_also">Voir aussi</h2>

<ul>
 <li>{{CSSxRef("&lt;image&gt;")}}</li>
 <li>{{CSSxRef("element")}}</li>
 <li>{{CSSxRef("&lt;url&gt;")}}</li>
 <li>{{CSSxRef("clip-path")}}</li>
 <li>{{CSSxRef("-moz-image-rect")}}</li>
 <li>{{CSSxRef("&lt;gradient&gt;")}}</li>
 <li>{{CSSxRef("image-set")}}</li>
 <li>{{CSSxRef("cross-fade")}}</li>
</ul>