Comment créer une image d'arrière-plan réactive en plein écran en CSS ?

Obtention d'une image d'arrière-plan réactive en plein écran à l'aide de CSS

Dans votre quête pour définir une image comme arrière-plan plein écran pour votre page Web, vous avez rencontré un problème : l'image ne couvre pas entièrement la page et se répète à l’extrémité droite. Voici comment résoudre ce problème à l'aide de techniques CSS :

Solution 1 : Méthode Cover

La propriété background-size peut être utilisée pour contrôler la taille de l'image d'arrière-plan. Dans ce cas, l'utilisation de la valeur cover garantira que l'image couvre toute la page, quitte à étirer ou recadrer l'image pour l'adapter :

background-size: cover;

Pour garantir que l'image est centrée horizontalement et verticalement, vous pouvez utiliser la propriété background-position avec la valeur 50% 50% :

background-position: 50% 50%;

Solution 2 : Pièce jointe fixe

Pour empêcher l'image d'arrière-plan de défiler avec le contenu de la page, vous pouvez définissez la propriété background-attachment sur fixe. Cela fixera l'image en place, permettant à la page de défiler derrière elle :

background-attachment: fixed;

Syntaxe abrégée

Vous pouvez écrire une version abrégée des deux solutions en utilisant la syntaxe suivante :

background: url(image.jpg) fixed 50% / cover;

où le / sépare les propriétés background-position et background-size.

Compatibilité Safari

Notez que Safari a un bug avec la syntaxe abrégée décrite ci-dessus. Pour l'utiliser dans Safari, vous devez séparer les propriétés comme suit :

background-image: url(image.jpg);
background-attachment: fixed;
background-position: 50% 50%;
background-size: cover;

En mettant en œuvre ces techniques, votre image d'arrière-plan couvrira désormais entièrement la page et restera centrée, offrant ainsi un arrière-plan visuellement attrayant et réactif pour votre site Internet.

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!