Comment centrer parfaitement une image d'arrière-plan en CSS ?-tutoriel CSS-php.cn

Comment centrer parfaitement une image d'arrière-plan en CSS ?

Mary-Kate Olsen

Libérer： 2024-11-29 16:05:13

original

234 Les gens l'ont consulté

How to Perfectly Center a Background Image in CSS?

Centrage des images d'arrière-plan avec CSS

Problème :

Les images d'arrière-plan sont difficiles à centrer avec précision . Avec le code CSS fourni :

body{
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

Copier après la connexion

l'image est carrelée et centrée, mais seulement partiellement visible. L'objectif est de centrer complètement l'image, même sur des écrans plus grands.

Résolution :

Pour centrer correctement l'image d'arrière-plan, utilisez les propriétés CSS suivantes :

background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;

Copier après la connexion

background-repeat:no-repeat empêche l'image de carrelage.
position d'arrière-plan : centre centre centre l'image horizontalement et verticalement.

Approche alternative :

Vous pouvez également envisager d'utiliser un

élément avec l'image d'arrière-plan et en utilisant la propriété z-index pour en faire l'arrière-plan. Cette approche peut être plus facile à centrer que l'utilisation d'une image d'arrière-plan sur la zone balise.

Conseils supplémentaires :

Utilisez une valeur en pixels pour la position de l'arrière-plan afin de garantir un centrage précis.
Si vous avez défini la hauteur min du à 100 %, vous pouvez également utiliser 50 % pour la position de l'arrière-plan horizontalement.

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!