Ajouter des images de fond aux éléments HTML avec background-image CSS

Dans cette nouvelle leçon, nous allons apprendre à insérer une ou plusieurs images en fond d’un élément plutôt qu’une simple couleur. Nous allons pouvoir faire cela avec la propriété background-image ou avec la notation raccourcie background.

Notez que les dégradés sont considérés comme des images en CSS. Nous allons donc devoir utiliser background-image ou background pour définir un dégradé en fond d’un élément. Nous allons apprendre à créer des dégradés dans la leçon suivante.

 

Les couches ou « layers » constituant le fond d’un élément

Pour bien comprendre comment vont fonctionner et s’appliquer les propriétés background-image et background-color, vous devez avant tout savoir qu’un élément HTML (ou plus exactement la boite le représentant) peut avoir plusieurs couches depuis le CSS3.

Cela veut dire qu’on va pouvoir « empiler » différents fonds les uns au-dessus des autres pour un même élément, à une limitation près qui est qu’on ne peut déclarer qu’une seule valeur pour la propriété background-color pour un élément et donc qu’un élément ne peut avoir qu’une couche de couleur de fond avec cette propriété.

En revanche, on va tout à fait pouvoir empiler une ou plusieurs images les unes sur les autres et par-dessus une couleur de fond pour un même élément. Cela va pouvoir s’avérer très utile si une image de fond ne peut pas s’afficher pour une raison ou une autre par exemple.

Retenez bien ici l’ordre des couches : la première image déclarée va être la plus proche de l’utilisateur, c’est-à-dire l’image de fond qui sera visible par défaut. Si on spécifie également une couleur de fond, alors cette couche sera placée derrière les couches « images de fond ».

Note : J’ai dit plus haut qu’il était impossible d’ajouter plusieurs couches de couleurs de fond à un élément avec background-color. Cependant, rien ne nous empêche d’utiliser les dégradés ou gradient en anglais pour mixer plusieurs couleurs sur la même couche.

 

Utilisation de la propriété background-image

La propriété background-image va nous permettre d’affecter une ou plusieurs images de fond à un élément. La première image déclarée sera l’image visible par défaut et chacune des autres images possiblement déclarées sera une couche en dessous.

Ajouter une image de fond avec background-image

Voyons comment ajouter une image de fond :

Ici, je me suis contenté d’attribuer une image de fond à mon div id="ex1". Pour cela, je le cible en CSS et j’utilise ma propriété background-image en précisant l’adresse relative de mon image (qui est ici dans le même dossier que mes fichiers) au sein d’un paramètre URL.

Notez qu’on va également tout à fait pouvoir passer une adresse absolue pour ajouter une image de fond (une adresse de type https://…). Cependant, pour des raisons évidentes, il est déconseillé d’utiliser une image hébergée sur un autre site comme image de fond : si le propriétaire du site supprime son image, votre image de fond n’apparaitra plus !

Ajouter plusieurs images de fond avec background-image

Pour ajouter plusieurs images de fond avec background-image, nous allons tout simplement séparer les différentes déclarations d’images par une virgule comme ceci :

Comme vous pouvez le voir ici, seule la première image déclarée est visible. C’est un comportement tout à fait normal et cela signifie que la première image déclarée a bien été chargée. Cependant, la deuxième image a bien été placée en arrière-plan également, seulement elle est cachée sous la première.

Cette deuxième image va être visible dans deux cas : si la première image ne peut pas être affichée ou si la première image ne remplit pas le fond de l’élément (et que la deuxième image est plus grande que la première). Pas d’inquiétude, nous allons apprendre par la suite à modifier la position et la taille d’une image de fond.

Une bonne pratique : déclarer une couleur de fond avec une image de fond

Par ailleurs, notez qu’il est considéré comme une bonne pratique de toujours déclarer une couleur de fond avec la propriété background-color en plus d’une ou de plusieurs images de fond au cas où celles-ci ne pourraient pas s’afficher.

Une nouvelle fois, si une image peut être chargée normalement, alors la propriété background-color n’aura aucun impact puisque la couche « couleur de fond » va se placer sous les couches « images de fond ».

La propriété background-color va accepter les mêmes valeurs que la propriété color, c’est à dire toutes les valeurs possibles de type « couleur » : nom de couleur, valeur hexadécimale, valeur RGB, RGBa, etc.

Ajouter différentes images de fond à différents éléments

Bien évidemment, rien ne nous empêche d’attribuer différentes images de fond à différents éléments. Dans le cas où un élément est inclus dans un autre, l’image ou la couleur de fond qui lui a été attribuée restera au premier plan.

Ainsi, on va par exemple pouvoir ajouter une image de fond à l’élément représentant le contenu visible de notre page à savoir l’élément body afin d’ajouter une image de fond « à notre page » en plus de l’image de fond passée à notre div.

Notez cependant que pour des raisons évidentes de lisibilité et de clarté nous éviterons généralement de multiplier les images de fond et préférerons généralement des couleurs unies notamment pour le fond d’une page.

See the Pen Cours HTML CSS 9.2.1 by Pierre (@pierregiraud) on CodePen.

 

Les propriétés nous permettant de gérer le comportement du fond

Nous savons maintenant comment ajouter une ou plusieurs images de fond à nos éléments. Cependant, nous n’avons aucun contrôle sur leur affichage. Pour contrôler le comportement de nos images de fond, nous allons pouvoir utiliser les propriétés suivantes :

• La propriété background-position ;
• La propriété background-size ;
• La propriété background-repeat ;
• La propriété background-origin ;
• La propriété background-clip ;
• La propriété background-attachment ;

Chacune des propriétés citées ci-dessous va nous permettre de préciser un comportement spécifique pour nos images de fond comme la taille, le comportement de répétition, etc.

Notez que toutes ces propriétés peuvent être déclarées d’un coup dans la notation raccourcie background que nous étudierons à la fin de cette leçon.

 

Gérer la répétition d’une image de fond avec background-repeat

La propriété background-repeat va nous permettre de définir si une image d’arrière-plan doit être répétée ou pas et selon quel(s) axe(s) (axe horizontal et / ou vertical).

Par défaut, une image de fond va être rognée à la taille de l’élément en largeur et / ou en hauteur si elle plus grande que celui-ci et au contraire être répétée horizontalement et verticalement si elle est plus petite que l’élément jusqu’à remplir la surface de fond définie.

Regardez plutôt l’exemple suivant :

Ici, mon div fait 320px de large (ou 330px en comptant les bordures) et 320px de haut (ou 330px en comptant les bordures). Mon image « emoji-smile.png » possède quant-à-elle une dimension de 50px*50px et va donc être par défaut répétée jusqu’à remplir le fond du div à la fois en largeur et en hauteur.

Notez deux choses intéressantes ici :

• Par défaut, l’image ne va pas être redimensionnée pour apparaitre un nombre entier de fois : on voit bien ici que les dernières itérations en largeur et en hauteur sont coupées ;
• Mon image gère ici la transparence, c’est pour cela que vous pouvez voir la couleur de fond du div en arrière-plan dans les endroits non remplis par celle-ci !

Nous allons pouvoir annuler ce comportement de répétition horizontale et verticale par défaut et définir nos propres règles de répétitions grâce à la propriété background-repeat. Pour cela, nous allons passer une ou deux valeurs à la propriété background-repeat parmi les valeurs suivantes.

Si une seule valeur est passée, alors elle définira le comportement de répétition de l’image à la fois sur son axe horizontal et sur son axe vertical. Si deux valeurs sont passées, la première valeur définira le comportement de répétition horizontal tandis que la seconde déterminera le comportement de répétition vertical de l’image.

• repeat : valeur par défaut. L’image est répétée jusqu’à remplir le fond ;
• no-repeat : l’image n’est pas répétée et n’apparait qu’une fois ;
• round : l’image est répétée jusqu’à remplir le fond et est étirée si nécessaire de façon à n’avoir qu’un nombre de répétitions complet de l’image (l’image ne pourra pas être rognée);
• space : l’image est répétée jusqu’à remplir le fond un nombre complet de fois comme pour la valeur round. Cependant, ici, l’image n’est pas étirée : la première et la dernière répétition de l’image sont collées au bord de l’élément et l’espace va être distribué équitablement entre chaque répétition de l’image.

Attention cependant, les valeurs round et space ainsi que la syntaxe avec deux valeurs font partie des recommandations du CSS3 et ne sont donc à proprement parler pas encore officielles. Il est donc possible que vous n’ayez pas le comportement attendu selon le navigateur et la version utilisée.

En plus de ces valeurs, il existe également deux autres valeurs qui servent seules à définir les comportements de répétition à la fois horizontal et vertical de l’image :

• repeat-x : l’image est répétée horizontalement jusqu’à remplir le fond mais pas verticalement. L’équivalent avec deux valeurs va être background-repeat : repeat no-repeat ;
• repeat-y : l’image est répétée verticalement jusqu’à remplir le fond mais pas horizontalement. L’équivalent avec deux valeurs va être background-repeat : no-repeat repeat.

Si plusieurs images de fond ont été déclarées avec background-image pour l’élément, alors on va pouvoir gérer le comportement de répétition de chacune d’entre elles exactement de la même façon : en passant plusieurs valeurs à background-repeat séparées par des virgules. Chaque valeur va s’appliquer à l’image de fond correspondante déclarée avec background-image.

See the Pen Cours HTML CSS 9.2.2 by Pierre (@pierregiraud) on CodePen.

 

Gérer la taille des images de fond avec background-size

La propriété CSS background-size va nous permettre de gérer la taille des images de fond d’un élément. Cette propriété va pouvoir prendre une ou deux valeurs. Les valeurs vont pouvoir être des mots clefs ou des dimensions absolues ou relatives. En cas de valeur relative, la dimension est exprimée en fonction de la taille du fond (du conteneur) et non pas de la taille originale de l’image.

Si on ne fournit qu’une valeur à background-size, alors cette valeur servira à déterminer la largeur de l’image de fond et la hauteur sera calculée automatiquement par rapport à la largeur fournie. En passant deux valeurs à background-size, la première servira à déterminer la largeur de l’image tandis que la seconde imposera la hauteur de celle-ci. Attention dans ce cas aux proportions de l’image dans le rendu final !

On va également pouvoir fournir l’un de ces deux mots clefs à background-size :

• contain : l’image va être redimensionnée afin qu’elle occupe le maximum de place dans le conteneur tout en conservant ses proportions de base et sans dépasser du conteneur. L’image va être contenue dans le conteneur ;
• cover : l’image va être redimensionnée afin de couvrir tout l’espace (en largeur) dans le conteneur tout en conservant ses proportions de base. L’image va pouvoir déborder du conteneur afin d’occuper toute la surface de fond. Les parties qui dépassent vont être rognées.

Dans le cas où plusieurs images de fond ont été attribuées avec background-image, et si l’on souhaite gérer la taille de chacune de ces images, alors il suffira une nouvelle fois d’indiquer les différentes valeurs de taille pour chaque image dans background-size en les séparant par des virgules.

See the Pen Cours HTML CSS 9.2.3 by Pierre (@pierregiraud) on CodePen.

Attention : La définition et les valeurs de la propriété background-size ne sont pour le moment que candidates au statut de recommandation et ne sont donc pas encore tout à fait officielles. Cependant, elles disposent déjà d’une très bonne prise en charge par les versions récentes des navigateurs les plus populaires.

 

Gérer le défilement d’une image de fond avec background-attachment

La propriété background-attachment va nous permettre de définir si l’image de fond doit être fixe ou défiler dans son conteneur. Cette propriété ne va donc avoir d’impact que dans le cas où nous avons une barre de défilement ou de scrolling dans notre élément.

Nous allons pouvoir passer une valeur parmi les suivantes à background-attachment :

• scroll : valeur par défaut. L’image de fond ne défile pas avec le contenu de l’élément auquel elle est associée mais défile avec l’élément dans la page ;
• fixed : l’image de fond restera fixe par rapport à son conteneur quelle que soit la taille de l’élément auquel elle est associée et même si l’élément en soi possède une barre de défilement ;
• local : l’image de fond va se déplacer avec le contenu de l’élément auquel elle est associée et défiler dans la page avec l’élément auquel elle est associée.

Regardez plutôt l’exemple suivant pour bien comprendre le fonctionnement de cette propriété (pensez à bien jouer avec chacune des deux barres de défilement) :

See the Pen Cours HTML CSS 9.2.4 by Pierre (@pierregiraud) on CodePen.

Comme pour les propriétés précédentes, dans le cas où on a plusieurs images de fond, il suffira de donner autant de valeurs à background-attachment que d’images de fond déclarées et de séparer les différentes valeurs données par des virgules.

 

Déterminer la position du fond avec background-origin

La propriété background-origin nous permet d’ajuster la zone dans laquelle notre ou nos images de fond vont pouvoir se placer ou plus exactement de déterminer la position de l’origine (donc de son coin supérieur gauche par défaut) de l’image de fond dans son élément.

Notez que si on a appliqué un background-attachment : fixed à notre élément, alors la propriété background-origin sera tout simplement ignorée (l’image de fond sera fixe en toutes circonstances).

On va pouvoir passer l’une de ces trois valeurs à background-origin :

• padding-box : valeur par défaut. La position de l’origine de l’image va être déterminée par rapport à la boite représentant le contenu + marges internes de l’élément. Le point d’origine de l’image est donc à l’extérieur des bordures ;
• border-box : la position de l’origine de l’image de fond va être déterminée par rapport à la bordure de l’élément. Le coin supérieur gauche de l’image va donc se situer derrière la bordure supérieure gauche par défaut ;
• content-box : la position de l’origine de l’image va être déterminée par rapport à la boite représentant le contenu de l’élément. Elle ne va donc pas recouvrir l’espace supérieur gauche occupé par le padding par défaut.

See the Pen Cours HTML CSS 9.2.5 by Pierre (@pierregiraud) on CodePen.

Comme précédemment, si plusieurs images de fond ont été déclarées avec background-image, il suffira de passer une valeur pour chaque image à background-origin en séparant les différentes valeurs par une virgule.

 

Positionner une image de fond avec background-position

La propriété CSS background-position va nous permettre de définir à partir de quelle position une image de fond doit s’afficher dans la surface de fond de l’élément associé et relativement à la surface de la zone de fond qu’elle peut occuper (qui a été définie avec background-origin).

Cette propriété va pouvoir prendre des mots clefs en valeur comme top, right, bottom, left ou center ou des distances relatives ou absolues comme 25% ou 50px ou un mélange des deux comme bottom 50px qui indique que le bord bas de l’image de fond sera situé à 50px du « bas de l’élément » (selon la zone de fond définie avec background-origin une nouvelle fois).

On va pouvoir passer une ou deux valeurs (simples comme bottom ou composées comme bottom 50px) à background-position. En ne passant qu’une valeur :

• background-position : center va centrer l’image de fond ;
• Les autres mots clefs vont coller l’image de fond au bord correspondant au mot clef et la deuxième position (horizontale ou verticale) sera par défaut déterminée à 50% de la taille de l’élément. Le point de départ de l’affichage de l’image de fond (dans le cas où elle serait plus grande que l’élément associé) sera déterminé par le mot clef ;
• Une longueur absolue ou relative va déterminer la position de l’image de fond par rapport au bord gauche de l’élément. La position verticale calculée sera 50% de la hauteur de l’élément. Le point de départ de l’image sera également son bord gauche.

En passant deux valeurs à background-position, la première valeur déterminera le point d’origine de l’image sur l’axe horizontal tandis que la seconde valeur déterminera le point d’origine de l’image dans l’axe vertical.

See the Pen Cours HTML CSS 9.2.6 by Pierre (@pierregiraud) on CodePen.

Une nouvelle fois, dans le cas où l’image de fond est plus grande que son élément associé, le point de départ d’affichage de l’image sera son bord gauche si on passe une longueur ou sera déterminé par le mot clef passé.

 

Déterminer la surface que peut occuper notre fond avec background-clip

La propriété background-clip permet de définir la surface du fond de l’élément dans laquelle l’image de fond va être visible ou pas.

Cette propriété va pouvoir prendre les mêmes valeurs que background-origin à savoir :

• border-box : valeur par défaut. L’image de fond sera visible jusque sous les bordures de l’élément (on pourra la voir dans le cas d’une bordure en pointillés par exemple) ;
• padding-box : l’image de fond sera visible jusqu’à la limite de la marge intérieure (padding) mais la partie sous les bordures de l’élément ne le sera pas ;
• content-box : l’image de fond ne sera visible que dans l’espace relatif à la boite entourant le contenu de l’élément.

Il convient cependant de ne pas confondre les propriétés background-clip et background-origin : la propriété background-origin sert à déterminer le point d’origine de l’image de fond, c’est-à-dire à partir d’où celle-ci va être placée tandis que background-clip va nous permettre de définir quelle partie du fond va être affichée / visible.

See the Pen Cours HTML CSS 9.2.7 by Pierre (@pierregiraud) on CodePen.

Comme vous pouvez le voir ici, le point d’origine de notre image de fond défini par la propriété background-origin se situe à l’extrémité des bordures de l’élément pour les div id="ex1" et div id="ex2". Pour le div id="ex2", cependant, on impose le fait que la partie du fond située entre la boite relative au contenu et la l’extrémité de la bordure ne soit pas affichée avec background-clip : content-box.

 

La propriété CSS raccourcie background

La propriété CSS background est la notation short hand ou notation raccourcie des propriétés liées au fond. En CSS 2, la propriété background permettait de définir une couleur et / ou une image de fond pour un élément HTML ainsi que le comportement de répétition, le défilement et la position du fond.

La propriété background était donc une propriété condensée des propriétés background-color, background-image, background-repeat, background-attachment et background-position.

En CSS 3, ses fonctionnalités ont été étendues pour refléter les apports du CSS 3 en termes d’outil de gestion du fond et la propriété background dans sa nouvelle définition permet aujourd’hui également de gérer plusieurs fonds d’un coup ainsi que de définir les comportements relatifs aux propriétés background-size, background-origin et background-clip pour un fond.

Attention cependant : même si la plupart des navigateurs supportent parfaitement ces ajouts, je vous rappelle que ce module du CSS 3 n’est pas encore reconnu comme recommandation officielle par le W3C mais est seulement candidat au statut de recommandation et est donc potentiellement sujet à modifications (même si elles sont peu probables).

L’ordre de déclaration des valeurs de la propriété background va être le suivant :

1. La valeur relative à la propriété background-image ;
2. Les valeurs relatives aux propriétés background-position / background-size (avec le slash entre les deux valeurs);
3. La valeur relative à la propriété background-repeat ;
4. La valeur relative à la propriété background-attachment ;
5. La valeur relative à la propriété background-origin ;
6. La valeur relative à la propriété background-clip ;
7. La valeur relative à la propriété background-color.

Notez que si certaines valeurs sont omises, alors les valeurs par défaut des différentes propriétés seront utilisées. Pour rappel, les valeurs par défaut de background vont être : background : none 0% 0% / auto auto repeat scroll padding-box padding-box transparent.

Pour déclarer plusieurs fonds, il suffira une nouvelle fois de séparer les déclarations complètes par une virgule. Attention cependant, pour que la propriété background fonctionne correctement avec des fonds multiples il faudra absolument réserver la valeur relative à la couleur de fond (background-color) pour le dernier fond déclaré.

See the Pen Cours HTML CSS 9.2.8 by Pierre (@pierregiraud) on CodePen.