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

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

Dans la conception Web, la création d'une image d'arrière-plan réactive en plein écran peut améliorer l'attrait visuel de vos pages Web. Cependant, rencontrer des problèmes où l'image ne couvre pas entièrement la page peut être frustrant. Prenons l'exemple suivant :

body {
    background: url('http://www.androidtapp.com/wp-content/uploads/2012/11/Angry-Birds-Star-Wars-Menu.png');
}

Dans ce code, l'image d'arrière-plan est répétée à l'extrémité droite en raison d'une couverture insuffisante. Pour remédier à cela, explorons une solution utilisant CSS.

Utilisation de la propriété Background-Size

La propriété background-size vous permet de spécifier les dimensions de l'image d'arrière-plan . En la définissant sur couverture, l'image s'étirera pour remplir toute la page, garantissant ainsi une couverture complète.

body {
    background: url('http://www.androidtapp.com/wp-content/uploads/2012/11/Angry-Birds-Star-Wars-Menu.png') cover;
}

Exemple avec des styles supplémentaires

Dans les navigateurs modernes, vous peut utiliser le CSS suivant pour créer une image d'arrière-plan réactive en plein écran avec un positionnement fixe :

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

Cette notation abrégée combine l'image d'arrière-plan, propriétés background-attachment, background-position et background-size pour obtenir l'effet souhaité.

Syntaxe abrégée pour une image d'arrière-plan réactive

Pour les navigateurs prenant en charge CSS3, vous peut utiliser la syntaxe abrégée suivante :

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

Cette syntaxe définit l'image comme arrière-plan, la fixe en place, la positionne au centre et garantit qu'il couvre la page entière.

Remarque pour le navigateur Safari

Il convient de noter que Safari a un problème connu avec le raccourci / pour spécifier la taille de l'arrière-plan. Pour éviter ce bug, utilisez plutôt la syntaxe suivante :

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

En incorporant ces techniques CSS, vous pouvez créer de superbes images d'arrière-plan réactives en plein écran qui améliorent l'expérience utilisateur et font ressortir vos pages Web.

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!