De nos jours, les sites Web dotés d’images d’arrière-plan réactives sont très demandés. Les sites Web réactifs offrent aux utilisateurs une expérience utilisateur idéale sur presque tous les appareils, y compris les mobiles, les tablettes ou les ordinateurs de bureau. Les images réactives peuvent adapter l’arrière-plan du site Web, la taille de l’écran et les dimensions. Les images réactives garantissent le maintien de la qualité et des proportions. De plus, le site Web avec des images d’arrière-plan réactives se charge rapidement.
Ce guide fournira des instructions pour adapter les images d'arrière-plan aux dimensions de l'écran.
Comment adapter les images d’arrière-plan aux dimensions de l’écran ?
L'image peut s'adapter aux dimensions de l'écran en suivant les instructions étape par étape ci-dessous.
Étape 1 : Créer une structure HTML
Tout d'abord, créez une structure HTML et ajoutez la feuille de style externe à l'aide du
< HTML >
< tête >
< lien rel = 'feuille de style' href = 'style.css' >
< titre > Image d'arrière-plan réactive titre >
tête >
< corps >
-- Zone pour ajouter l'autre contenu-- >
corps >
HTML >
Étape 2 : Appliquer CSS
Maintenant, appliquez le CSS au « corps ' section. Tout d’abord, spécifiez l’image d’arrière-plan. Pour cela, utilisez le « image de fond » et précisez le « URL() 'valeur contenant l'adresse du fichier image.
Après cela, utilisez le ' image de fond ' pour spécifier la taille de l'image, le ' Répétition du fond ' propriété pour définir la répétition de l'image, et ' pièce jointe d'arrière-plan » pour définir si l'image défile avec le reste de la page ou non. Enfin, définissez le « marge ' et ' rembourrage ' à ' 0 » :
corps {image d'arrière-plan : URL ( 'image-test.jpg' ) ;
taille de l'arrière-plan : 100 % 100 % ;
/* Redimensionner l'image pour 100 % largeur et 100 % hauteur */
répétition d'arrière-plan : pas de répétition ;
pièce jointe d'arrière-plan : corrigé ;
marge: 0 ;
rembourrage: 0 ;
/* Facultatif : arrière-plan fixe */
}
Sortir
Voici le résultat avant de contracter la fenêtre du navigateur :
Après Contraction du navigateur :
Le résultat ci-dessus confirme que l'image a adapté l'arrière-plan aux dimensions de l'écran.
Conclusion
Pour adapter les images d’arrière-plan aux dimensions de l’écran, incluez d’abord le « fenêtre ' dans la section d'en-tête pour contrôler les dimensions et la mise à l'échelle. Ensuite, créez une structure HTML et appliquez CSS. En CSS, définissez le ' taille du fond ' valeur de la propriété au ' couverture ' pour redimensionner la hauteur et la largeur d'une image. Cet article a présenté un guide complet pour adapter les images d'arrière-plan aux dimensions de l'écran.