En CSS vous pouvez faire beaucoup de choses pour styliser l'arrière-plan du contenu. Nous avons déjà vu quelques utilisations simples, comme couleurs et images de fond ; dans cet article, nous vous disons tout et examinons quelques fonctionnalités avancées telles que arrière-plans à plusieurs images et dégradés de couleur.

Prérequis : Connaître les bases de l'HTML (voir  Introduction au HTML) et avoir une idée de comment fonctionne le CSS (voir Introduction à CSS.)
Objectif : Apprendre à styliser les arrière-plans en détail.

Qu'est-ce qu'un arrière-plan ?

L'arrière-plan d'un élément est la zone qui se trouve derrière le contenu, le remplissage et l'encadrement d'un élément. Par défaut, c'est toujours le cas — dans les navigateurs récents vous pouvez modifier l'espace occupé par l'arrière plan en utilisant la propriété background-clip (voir le paragraphe Découpage du fond de l'article Le modèle de boîte pour plus de détails.)

L'arrière-plan ne se trouve pas derrière la marge — la marge ne fait pas partie de la zone de l'élément : c'est plutôt à la zone extérieure de l'élément.

Plusieurs autres propriétés peuvent être utilisées pour manipuler l'arrière-plan d'un élément, nous en avons déjà vu plusieurs dans notre  cours :

  • background-color : définit une couleur unie d'arrière-plan.
  • background-image : définit l'image a afficher en arrière-plan d'un élément. C'est, soit un fichier statique, soit un dégradé généré.
  • background-position : définit la position où l'arrière‑plan se situera au fond de l'élément.
  • background-repeat : définit si l'arrière plan doit être répété ou pas.
  • background-attachment : définit le comportement de l'arrière-plan d'un élément lors du défilement de son contenu, ex : est-ce-qu'il défile avec le contenu ou reste fixe ?
  • background : raccourci pour définir les cinq propriétés ci-dessus en une ligne.
  • background-size : permet à l'image d'arrière-plan d'être redimensionnée dynamiquement.

Note: La majorité de ces fonctionnalités sont vraiment bien prises en charge par les navigateurs, excepté les deux dernières dont la compatibilité est légérement limitée (Internet Explorer 9+, Safari 7+, Android 4.4+) ainsi que  pour les dégradés (Internet Explorer 9+).

Dans la suite de cet article, nous allons voir comment utiliser ces fonctionnalités en détail.

Les bases : couleur, image, position, répétition

Explorons à travers un exemple simple le fonctionnement des quatre propriétés de base — elles sont utilisées tout le temps quand on travaille les arrière-plans.

Couleur d'arrière-plan

La propriété background-color est très souvent utilisée :

  • Pour commencer, la couleur d'arrière-plan par défaut n'est pas le blanc (comme vous auriez pu le supposer), mais la transparence — par conséquent, si vous définissez la couleur d'arrière-plan d'un élément à une valeur intéressante donnée, mais que vous voulez que ses éléments enfants soient de couleur blanche, vous devrez le définir explicitement.
  • De plus, il est important de définir une couleur d'arrière-plan en recours. Outre le fait que le chargement de l'image d'arrière-plan peut échouer pour diverses raisons et que les arrière-plans dégradés ne sont prises en charge que par des navigateurs récents, les couleurs d'arrière-plan sont, a contrario, prises en charge quasiment partout. Donc définir  une couleur d'arrière-plan de base et de telles caractéristiques est une bonne idée. Ainsi, le contenu sera lisible en toutes circonstances.

Commençons avec un exemple simple en HTML :

<p>Boîte passionnante !</p>

Donnons-lui une couleur de fond :

p {
  font-family: sans-serif;
  padding: 20px;
  /* propriétés de l'arrière-plan */
  background-color: yellow;
}

Le résultat est le suivant :

Image d'arrière-plan

La propriété background-image définit l'image d'arrière-plan à afficher en fond d'un élément. L'utilisation la plus simple de cette propriété consiste à utiliser la fonction url() — qui prend le chemin de l'image pour paramètre — pour récupérer une image statique à insérer. Maintenant, ajoutons une image d'arrière plan à l'exemple du dessus :

p {
  font-family: sans-serif;
  padding: 20px;
  /* propriétés de l'arrière-plan */
  background-color: yellow;
  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
}

Le résultat est le suivant :

L'apparence n'est pas formidable pour le moment — les images sont répétées horizontalement et verticalement par défaut. Nous pouvons arranger cela en utilisant la propriété background-repeat : nous allons la voir un peu plus loin.

Note : Pratiquement tous les formats d'image pris en charge par HTML (Les images en HTML) sont aussi pris en charge pour les images d'arrière plan des CSS, y compris le format SVG.

Chose importante à ne pas oublier : les images d'arrière-plan définies avec les CSS sont invisibles aux techniques d'assistance comme les lecteurs d'écran, car elles apparaissent en dessous du contenu et n'en font pas partie — elles sont là uniquement pour la décoration. Si vous souhaitez incorporer une image dans la page intégrée au contenu, vous devez le faire avec un élément <img>.

Répétition de l'arrière-plan

background-repeat permet de définir le mode de répétition de l'image d'arrière-plan. Par défaut, sa valeur est repeat qui, comme nous l'avons vu précédemment, induit une répétition de l'image en arrière-plan jusqu'à ce que l'arrière-plan de l'élément soit rempli. Ce n'est pas ce que nous voulons dans ce cas (même si cela peut l'être dans d'autres, ex. : repeating-background.html). Les autres valeurs courantes, généralement prises en charge, sont :

  • no-repeat : l'image n'est pas répétée : elle est affichée une seule fois.
  • repeat-x : l'image est répétée horizontalement tout le long de l'arrière‑plan.
  • repeat-y : l'image est répétée verticalement tout le long de l'arrière‑plan.

Arrangeons notre exemple :

p {
  font-family: sans-serif;
  padding: 20px;
  /* propriétés de l'arrière-plan */
  background-color: yellow;
  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
  background-repeat: no-repeat;
}

Le résultat est le suivant :

L'apparence est meilleure, mais le positionnement de l'image est désactivé — elle chevauche actuellement le texte. Nous devons la mettre à un meilleur emplacement.

Position de l'arrière‑plan

background-position permet de placer l'image là où vous le souhaitez dans l'arrière‑plan. Généralement la propriété prend deux valeurs séparées d'une espace définissant les coordonnées horizontale (x) et verticale (y) de la position de l'image. L'angle supérieur gauche est l'origine — (0,0). Représentez‑vous le fond comme un graphe dont les abscisses x croissent de la gauche vers la droite et les ordonnées y du haut vers le bas.

La propriété accepte divers types de valeurs ; les plus couramment utilisés sont :

  • des valeurs absolues comme les pixels — par exemple background-position: 200px 25px.
  • des valeurs relatives comme les rems — par exemple background-position: 20rem 2.5rem.
  • des pourcentages — par exemple background-position: 90% 25%.
  • des mots‑clés — par exemple background-position: right center. Ces valeurs sont intuitives ; elles peuvent prendre respectivement les valeurs left, center, right et top, center, bottom.

Notez que vous pouvez marier et faire correspondre ces valeurs, par exemple background-position: 99% center. Notez aussi que vous pouvez ne préciser qu'une seule valeur : elle sera considérée comme étant la valeur horizontale ; la valeur verticale sera prise par défaut à center.

Corrigeons notre exemple :

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
  background-repeat: no-repeat;
  background-position: 99% center;
}

Voici le résultat :

Images d'arrière‑plan : dégradés

Il y a un autre ensemble de valeurs possibles pour background-image — elles sont relatives aux dégradés de couleurs, transitions progressives de couleurs à travers l'arrière-plan. La fonctionnalité des dégradés créés dynamiquement a été introduite récemment, vu leur succès dans la conception de sites Web, mais implémenter des dégradés avec des images de fond est plutôt dur. Il existe actuellement deux types de dégradés : les linéaires (ligne droites accolées dont la couleur varie graduellement avec celle des lignes voisines) et les radiaux (rayonnant à partir d'un point unique).

Dans cet article, nous examinerons uniquement le premier type. Le second, plus complexe, est moins utilisé. Les liens à la fin de l'article vous dirigeront vers des informations complémentaires sur les deux types.

Un dégradé linéaire se crée en donnant la fonction linear-gradient() pour valeur à la propriété background-image. Cette fonction attend au minimum trois paramètres séparés par des virgules — la direction du dégradé sur le fond, la couleur de début et la couleur de fin. Par exemple :

background-image: linear-gradient(to bottom, orange, yellow);

Ce dégradé va de haut en bas, commençant par de l'orangé en haut passant doucement à du jaune en bas. Vous pouvez utiliser des mots-clés pour definir la direction (to bottom, to right, to bottom right, etc.) ou des valeurs en degrés ( équivaut à to top, 90° à to right, jusqu'à 360° qui équivaut à to top à nouveau).

Vous pouvez également définir d'autres points le long du dégradé où la couleur est précisée — ce sont des « color stops » ; le navigateur calculera les gradients de couleur entre chaque couple de « color stop ». Donc, par exemple :

background-image: linear-gradient(to bottom, yellow, orange 40%, yellow);

Ce gradient va de haut en bas, commence avec du jaune en allant vers l'orangé sur 40 % du parcours vers le bas de l'élément, puis revient au jaune en bout de parcours. Vous pouvez préciser autant de « color stops » que vous  souhaitez et en définir la position avec d'autres unités, telles que rem, px, etc.

Ajoutons un dégradé linéaire à notre exemple :

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: linear-gradient(to bottom, yellow, #dddd00 50%, orange);
}

Voici le résultat :

Notez que vous pouvez également définir un dégradé linéaire répétitif à l'aide de la fonction repeating-linear-gradient(). Le fonctionnement est exactement le même, sauf que le motif défini est répété encore et encore jusqu'aux limites de l'arrière‑plan. Par exemple :

background-image: repeating-linear-gradient(to right, yellow, orange 25px, yellow 50px);

Cette directe crée un dégradé répété allant du jaune à l'orangé et inversement tous les 50 pixels.

Liaison de l'arrière‑plan

Autre option disponible pour les arrière-plans : indiquer leur mode de défilement quand le contenu défile. Il est contrôlé avec la propriété background-attachment. Elle accepte les valeurs suivantes :

  • scroll : fixe l'arrière plan à la vue de la page, donc il défilera avec la page. Notez que nous avons dit la vue et non l'élément — si vous faites défiler effectivement l'élément sur lequel l'arrière‑plan est situé, et non la page, l'arrière plan ne défilera pas.
  • fixed : fixe l'arrière‑plan à sa position dans la page, donc il ne défile pas quand la page défile — il reste exactement à la même position que vous fassiez défiler la page ou l'élément sur lequel l'arrière‑plan est mis.
  • local : cette valeur a été ajoutée plus tard (elle n'est prise en charge que sur Internet Explorer 9+, alors que les précédentes l'étaient sur IE4+) car la valeur scroll prête à confusion et ne correspond pas à ce que vous voulez vraiment dans nombre de cas. La valeur local fixe the l'arrière‑plan à l'élément sur lequel il est défini. Ainsi, quand vous faites défiler l'élément, l'arrière‑plan défile avec lui.

La propriété background-attachment n'a d'effet que si le contenu doit défiler. Donc, nous avons créé une démo pour montrer les différences entre les trois valeurs — voyez background-attachment.html (voyez aussi le code source ici).

Abrégé des propriétés : background

Avec la propriété background, on peut déclarer toutes les valeurs de propriété présentées ci-avant (et d'autres, dans les nouveaux navigateurs) sur une seule ligne. Pour ce faire, utilisez les mêmes valeurs que celles des propriétés prises individuellement, mais placez‑les toutes sur une même ligne séparées par des espaces, ainsi :

background: yellow linear-gradient(to bottom, orange, yellow) no-repeat left center scroll;

Toute valeur de propriété non définie dans l'abrégé se verra attribuer sa valeur par défaut. Consultez la page de référence de background pour connaître ces valeurs par défaut, ainsi que les autres propriétés pouvant être incluses dans cet abrégé.

Revenons à notre exemple de boîte passionnante et remplaçons les propriétés existantes en utilisant la syntaxe abrégée. Nous pouvons remplacer toutes ces propriétés :

background-color: yellow;
background-image: linear-gradient(to bottom, yellow, #dddd00 50%, orange);
background-repeat: no-repeat;
background-position: 99% center;

par :

background: yellow linear-gradient(to bottom, yellow, #dddd00 50%, orange) no-repeat 99% center;

Le code final code ressemble à ceci :

p {
  font-family: sans-serif;
  padding: 20px;
  /* propriétés de l'arrière-plan */
  background: yellow linear-gradient(to bottom, yellow, #dddd00 50%, orange) no-repeat 99% center;
}

et voici le résultat :

Arrière‑plans multiples

Très récemment (depuis Internet Explorer 9) a été ajoutée la possibilité d'attacher plusieurs arrière‑plans à un seul élément. C'est une bonne chose, car les arrière‑plans multiples sont très utiles. Les définitions des divers arrière‑plans sont séparés par des virgules :

background: url(image.png) no-repeat 99% center,
            url(background-tile.png),
            linear-gradient(to bottom, yellow, #dddd00 50%, orange);
background-color: yellow;              

Les arrière-plans sont empilés les uns sur les autres, le premier étant en haut, puis le deuxième au dessous, puis le troisième, etc. Ce n'est peut-être pas ce à quoi vous vous attendiez, alors faites attention. Notez également que nous avons mis la couleur d'arrière-plan de repli dans une déclaration de propriété séparée : essayer de l'inclure dans les arrière-plans multiples semble casser les choses.

Vous pouvez également mettre plusieurs valeurs dans les formes longues des propriétés background-*, par exemple :

background-image: url(image.png), url(background-tile.png);
background-repeat: no-repeat, repeat;

bien qu'il soit probablement préférable d'utiliser la forme abrégée de  background — non seulement plus rapide à écrire, mais plus commode pour voir les propriétés s'appliquant à tel ou tel arrière‑plan.

 

Avant que la fonctionnalité d'arrière-plans multiples soit disponible, les développeurs web devaient mettre plusieurs éléments <div> autour de leurs boîtes, puis appliquer une image d'arrière-plan distioncte à chacun d'eux :

<div class="background1">
  <div class="background2">
    <div class="background3">
      <p>My content</p>
    </div>
  </div>
</div>

 

Cela fonctionne, mais il en résulte un balisage difficile à lire. Vous devrez peut-être encore faire ce type de codage si vous avez besoin de prendre en charge les anciennes versions d'Internet Explorer.

Mettons plusieurs arrière-plans sur notre exemple de boîte passionnante — pour voir le dégradé et la boule de feu, tous deux en même temps :

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png) no-repeat 99% center,
              linear-gradient(to bottom, yellow, #dddd00 50%, orange);
}

Voici le résultat :

Note : Vous trouverez l'exemple complet sur Github (voir le code source aussi).

Taille de l'arrière‑plan

Comme mentionné précédemment, une propriété — background-size — permet de modifier dynamiquement la taille d'une image d'arrière-plan pour qu'elle s'intègre mieux dans votre design. Ceci est très utile à bien des égards, par exemple en corrigeant automatiquement la taille des icônes qui n'ont pas été téléchargées correctement. Gardez juste à l'esprit que ceci n'est pas pris en charge par les versions d'IE inférieures à 9 : vous ne pourrez donc pas compter dessus si vous avez besoin de prendre en charge des navigateurs plus anciens. Pour chaque image, vous devez inclure deux valeurs —  une pour la dimension horizontale et une pour la dimension verticale :

background-image: url(myimage.png);
background-size: 16px 16px;

Vous pouvez utiliser l'unité de longueur que vous souhaitez — px, pourcentages, rem, etc.

Vous pouvez voir un bel exemple de background-size en cours d'utilisation dans Incorporation d'icônes dans les liens.

Apprentissage actif : jouer avec les arrière‑plans

 

Cet apprentissage actif n'a pas de solution déterminée — dans ce cas, jouez avec les arrière-plans et amusez‑vous avant de passer à autre chose. Vous pourriez :

  • définir une couleur d'arrière-plan différente,
  • inclure une image différente — trouver un chemin absolu vers une image à utiliser dans la fonction url().
  • appliquer un dégradé de fond.
  • appliquer plusieurs arrière-plans.
  • inclure une propriété background-size pour modifier la taille des images d'arrière-plan.

Si vous faites cet exercice dans le cadre d'une formation ou d'un groupe d'étude, votre enseignant ou votre mentor pourrait également vous confier des tâches supplémentaires à accomplir.

Si vous faites une erreur, vous pouvez toujours Réinitialiser en pressant le bouton de même nom.

Résumé

Cet article devrait vous avoir indiqué la majeure partie de ce que vous avez besoin de savoir à propos des éléments aménageant le style des arrière-plans. Nous espérons aussi que vous avez aussi pris du plaisir en cours de route ! Dans le prochain article, nous jouerons avec les bordures et nous verrons comment les styliser.

Voir aussi

Dans ce module

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Dralyab, Loelle
Dernière mise à jour par : Dralyab,