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 }.

Gagnez du temps dans la gestion de votre code et de vos données

Téléchargez ce guide pour effectuer des vérifications et des changements en masse avec les regex et gagner en productivité.

• Qu'est-ce qu'une regex ?
• La structure d'une regex
• Des astuces d'utilisation
• Mémento sur les regex

Télécharger le guide En savoir plus Télécharger le guide

Télécharger

Tous les champs sont obligatoires.

Merci d'avoir soumis le formulaire

Cliquez sur le lien pour accéder au contenu en tout temps

Télécharger

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.