Comment puis-je centrer avec précision une image d'arrière-plan à l'aide de CSS ?

Centrage précis d'une image d'arrière-plan avec CSS

Dans le but d'aligner une image d'arrière-plan de manière centrale, le code CSS suivant a été utilisé :

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

Bien que le code présente effectivement l'image en mosaïque sur toute la page, le résultat est une vue partielle avec la partie supérieure de l'image étant obscurci. L'objectif est d'obtenir un centrage parfait, en conservant une visibilité complète même sur un écran de 21".

Pour réaliser cet alignement précis, les ajustements suivants au CSS sont recommandés :

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

Cette modification définit explicitement la position de l'arrière-plan au centre de l'écran à la fois horizontalement et verticalement.

Vous pouvez également créer un conteneur div pour l'image et utiliser z-index pour le définir car l'arrière-plan peut simplifier le processus de centrage.

Une autre approche consiste à utiliser des valeurs de pixels dans la propriété background-position :

background-position: 0 100px; /*use a pixel value that will center it*/

Alternativement, si la hauteur minimale du corps est définie sur 100 %, 50 % peuvent être utilisés pour le centrage :

body{
    background-repeat:no-repeat;
    background-position: center center;
    background-image:url(../images/images2.jpg);
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    min-height:100%;
}

Mettez en œuvre ces ajustements pour centrer sans effort une image d'arrière-plan avec précision.

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!