Centrer les images d'arrière-plan en CSS

1. Utilisez les propriétés d’arrière-plan pour centrer l’image d’arrière-plan en CSS
2. Utilisez les propriétés width, height, left et top pour centrer l’image d’arrière-plan en CSS

Ce tutoriel montrera quelques méthodes pour centrer les images d’arrière-plan en CSS.

Utilisez les propriétés d’arrière-plan pour centrer l’image d’arrière-plan en CSS

Nous pouvons centrer l’image d’arrière-plan en CSS en utilisant les différentes propriétés d’arrière-plan.

Nous utiliserons les propriétés comme background-image, background-repeat, background-attachment, background-position et background-size pour centrer l’image de fond. On peut aussi utiliser la propriété abrégée background pour définir ces différentes propriétés.

La propriété background-image définira l’image à l’aide de la fonction url(). Nous utilisons la propriété background-repeat pour définir le comportement de répétition de l’image.

La propriété background-attachment définit le comportement fixe ou défilant de l’arrière-plan. Nous pouvons définir la position de départ de l’arrière-plan avec la propriété background-position.

Enfin, nous pouvons définir la taille de l’image à l’aide de la propriété background-size.

Par exemple, sélectionnez la balise html dans CSS et appliquez les styles.

Tout d’abord, définissez une image d’arrière-plan à l’aide de la propriété background-image. Ensuite, définissez la propriété background-repeat sur no-repeat.

Ensuite, écrivez l’option fixed pour la propriété background-attachment. Ensuite, appliquez la propriété background-position à l’option center center et la propriété background-size à cover.

Dans l’exemple suivant, l’option no-repeat empêchera la répétition de l’image. Lorsque la taille de l’image d’arrière-plan est petite, l’image sera répliquée sous forme de lignes et de colonnes.

L’image d’arrière-plan restera fixe lorsque nous ferons défiler la page car nous avons utilisé l’option fixed pour la propriété background-attachment. L’option center center dans la propriété background-position placera l’image au centre horizontalement et verticalement.

Enfin, l’option cover redimensionnera l’image pour couvrir tout le conteneur html. Par conséquent, nous pouvons centrer l’image d’arrière-plan en utilisant diverses propriétés d’arrière-plan en CSS.

Exemple de code :

html{
    background-image: url("/img/DelftStack/logo.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

Utilisez les propriétés width, height, left et top pour centrer l’image d’arrière-plan en CSS

Dans cette méthode, nous allons discuter d’une autre façon de centrer l’image d’arrière-plan en CSS en utilisant les propriétés width, height, left et top. Nous pouvons définir la hauteur et la largeur à 100 % pour que l’image occupe toute la hauteur et la largeur de la balise body.

L’élément body est le parent de l’élément img. Nous pouvons utiliser les propriétés top et left pour définir la distance de l’image d’arrière-plan aux éléments haut et gauche de l’image.

Il convient de noter que ces deux propriétés ne fonctionneront que lorsque la propriété position de l’élément est définie.

Par exemple, sélectionnez la balise img et définissez les propriétés width et height sur 100%. Ensuite, définissez la propriété position sur fixed. Puis, définissez les propriétés left et right sur 0.

Nous avons utilisé la valeur 0 dans les propriétés left et right pour ne laisser aucun espace au bord supérieur et gauche de l’image avec l’élément voisin. En conséquence, l’image s’adaptera à la fenêtre d’affichage du navigateur.

De cette manière, nous pouvons utiliser ces différentes propriétés pour centrer l’image de fond en CSS.

Exemple de code :

img {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
}

<div>
    <img src="/img/DelftStack/logo.png">
</div>