Comment mettre une image en background avec CSS ?

CSS background-image est une propriété qui permet d'ajouter une image en arrière-plan d'un élément HTML. Tous les éléments peuvent avoir une image de fond. Si la propriété CSS background-image est attribuée à l'élément « body », par exemple, l'image constitue l'arrière-plan de la page web toute entière ; pour faire apparaître l'image en arrière-plan du pied-de-page, d'un conteneur d'éléments ou encore d'un titre de premier niveau, la propriété est attribuée respectivement aux éléments HTML « footer », « div » ou « h1 ». Des propriétés permettent de modifier l'affichage par défaut de l'image de fond, notamment sa taille et sa position, à des fins de personnalisation et d'optimisation du rendu. À noter que la propriété CSS background-image peut aussi servir à appliquer un dégradé de couleurs en arrière-plan d'un élément.

Le code CSS pour mettre une image en background est inséré dans l'élément auquel appliquer l'image de fond. Pour que l'image constitue l'arrière-plan de la page toute entière, par exemple, la syntaxe est la suivante : body { background-image: url("exemple.png") }. Si l'image doit s'afficher en arrière-plan d'un conteneur identifié avec l'attribut class « imagedefond », le code CSS est le suivant : .imagedefond { background-image: url("exemple.png") }.

See the Pen css-background-image_exemple-base by HubSpot France (@HubSpot-France) on CodePen.

À noter que par précaution, il est recommandé d'ajouter dans le code CSS la propriété background-color. Si le navigateur ne parvient pas à charger l'image, c'est la couleur indiquée qui apparaît en fond. Exemple de code : body { background-image: url("exemple.png"); background-color: grey }.

Personnaliser l'image de fond avec CSS

Sans plus d'informations, CSS affiche ainsi l'image par défaut :

• L'image est positionnée en haut à gauche de l'élément, et se répète, le cas échéant, jusqu'à remplir tout l'arrière-plan de l'élément. En fonction des dimensions d'origine de l'image, cela peut créer un effet de mosaïque, et l'image peut être rognée.
• Si l'élément figure dans un encadré, l'image s'étend jusque sous les bordures du cadre.

Position, taille, effet de répétition ou encore superposition de plusieurs images distinctes : des propriétés CSS permettent de personnaliser l'image de fond, pour l'adapter à l'élément qu'elle illustre.

Paramétrer la répétition de l'image de fond avec background-repeat

Par défaut, l'image se répète en lignes et en colonnes pour remplir le fond de l'élément. La propriété CSS background-repeat permet de modifier ce comportement, en renseignant la valeur souhaitée :

• « background-repeat: repeat-x » répète l'image pour couvrir la largeur de l'élément, mais pas la hauteur. À l'inverse, « background-repeat: repeat-y » répète l'image pour couvrir la hauteur de l'élément, mais pas la largeur.
• « background-repeat: space » répète l'image un maximum de fois, mais sans jamais la rogner. Il peut donc rester de l'espace vide en arrière-plan de l'élément.
• « background-repeat: no-repeat » affiche l'image une seule fois, en haut à gauche, dans sa taille d'origine. Tout l'espace en arrière-plan n'est donc pas nécessairement rempli par l'image de fond.

Dans cet exemple d'utilisation de la propriété CSS background-repeat: space, la couleur de fond indiquée avec la propriété background-color apparaît en-dessous.

See the Pen css-background-image_repeat by HubSpot France (@HubSpot-France) on CodePen.

Déterminer le positionnement de l'image de fond avec background-position

Par défaut, l'image est affichée à partir du coin en haut à gauche de l'élément. La propriété CSS background-position permet de modifier l'endroit de l'élément où l'image d'arrière-plan s'affiche. La propriété prend au choix les valeurs : « top », « bottom », « left », « right » ou « center ». Il est également possible de positionner l'image sur l'abscisse et l'ordonnée, sachant que la position par défaut est : (0, 0).

Dans cet exemple d'utilisation de la propriété CSS background-position: center, la propriété background-repeat prend la valeur « no-repeat » pour afficher l'image une seule fois, au centre.

See the Pen css-background-image_position-centree by HubSpot France (@HubSpot-France) on CodePen.

Définir la taille de l'image de fond avec background-size

La propriété CSS background-size permet de personnaliser la taille de l'image d'arrière-plan. La propriété peut prendre les valeurs suivantes :

• La longueur et la largeur de l'image, exprimées en pixels ou en pourcentage par exemple.
• La valeur « cover » pour couvrir tout l'arrière-plan de l'élément : l'image est alors étirée puis rognée pour s'adapter à la taille de l'arrière-plan.
• La valeur « contain » pour afficher l'image tout entière, sans la rogner : si l'image est plus petite que l'élément qu'elle illustre, elle se répète jusqu'à la couvrir dans sa totalité, à moins d'avoir spécifié la propriété CSS « background-repeat: no-repeat » auquel cas il reste de l'espace vide en arrière-plan de l'élément.

Exemple d'utilisation de la propriété CSS background-size avec la valeur « cover » :

See the Pen css-background-image_size-cover by HubSpot France (@HubSpot-France) on CodePen.

Créer un effet de parallaxe avec background-attachment

Par défaut, l'image d'arrière-plan est attachée à l'élément qu'elle illustre et « disparaît » à mesure que l'utilisateur fait défiler la page. La propriété CSS background-attachment, avec la valeur « fixed », permet de maintenir l'image de fond à sa place sur l'écran quand l'utilisateur fait défiler la page : cela crée un effet de parallaxe.

Exemple d'effet parallaxe avec la propriété background-attachment :

See the Pen css-background-image_attachment-parallaxe by HubSpot France (@HubSpot-France) on CodePen.

Superposer plusieurs images en arrière-plan

La propriété CSS background-image permet de superposer plusieurs images en arrière-plan d'un élément. Il suffit de renseigner les différentes valeurs d'URL les unes après les autres : background-image: url("exemple.png"), url("exemple1.png"), url("exemple2.png"). La première URL renseignée est affichée au-dessus de la deuxième, affichée elle-même au-dessus de la troisième, et ainsi de suite.

Personnaliser l'image de fond d'un élément avec bordures

Lorsque l'élément à illustrer figure dans un encadré, l'image s'étend par défaut jusque sous les bordures du cadre. Les propriétés CSS background-clip et background-origin permettent de modifier ce comportement, en attribuant les valeurs content-box ou padding-box par exemple.

Exemple d'image d'arrière-plan à l'intérieur de la bordure :

See the Pen css-background-image_border-dotted by HubSpot France (@HubSpot-France) on CodePen.

Utiliser la propriété CSS background image pour faire un dégradé de couleurs

Il est possible d'afficher un dégradé de couleurs en arrière-plan d'un élément grâce à la propriété CSS background-image. Au lieu de renseigner l'URL d'une image, il faut renseigner un type de dégradé et deux couleurs :

• Il existe plusieurs types de dégradés : linear-gradient, radial-gradient ou encore conic-gradient
• Les couleurs sont indiquées avec leurs noms en anglais, ou avec leurs valeurs hex, hsl ou encore rgba.

Exemple de syntaxe du code CSS : background-image: linear-gradient(pink,red).

Si la propriété CSS background-image inclut les propriétés de gradient et d'URL, l'image de fond s'affiche avec superposition d'un filtre de dégradé de couleurs. Illustration :

See the Pen css-background-image_filtre-degrade-couleurs by HubSpot France (@HubSpot-France) on CodePen.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.