Comment définir l'image d'arrière-plan pour qu'elle soit centrée en html/css

En HTML/CSS, vous pouvez utiliser l'attribut background-position pour que l'image d'arrière-plan soit centrée. Il vous suffit d'ajouter le style "background-position: center;" à l'élément où l'image d'arrière-plan est définie, et vous pouvez définir l’image d’arrière-plan dans les directions horizontale et verticale.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Étapes HTML/CSS pour définir l'image d'arrière-plan à centrer

Ouvrez l'outil de développement frontal, créez une nouvelle page de code HTML

Créez une balise div pour définir la couleur d'arrière-plan sur le page de code html, puis donnez Add class = "bg-img" à cette balise

pour définir l'image d'arrière-plan. Créez une balise de style, puis définissez les styles d'image d'arrière-plan, d'image non répétitive, de largeur et de hauteur pour la classe bg-img dans la balise. Code de style :

.bg-img{
height: 100vh;
width: 100%;
background-image: url(img/car.jpg);
background-repeat: no-repeat;
}

Enregistrez le code html et ouvrez-le avec un navigateur. À ce moment, vous constaterez que l'image d'arrière-plan du navigateur est affichée dans le coin supérieur gauche.

Retournez à la page de code html et ajoutez le style background-position: center à la classe bg-img.

Enregistrez le code html et actualisez le navigateur. À ce moment, vous constaterez que l'image d'arrière-plan du navigateur a été automatiquement centrée.

Tutoriels recommandés : "Tutoriel vidéo HTML", "Tutoriel vidéo CSS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!