Examinez les sites Web les plus populaires d’aujourd’hui et découvrez un traitement de la conception qui consiste en de grandes images d’arrière-plan couvrant tout l’écran. L'ajout de ces images constitue l'un des défis liés à la meilleure pratique selon laquelle les sites Web doivent répondre à différentes tailles d'écran et dispositifs - une approche connue sous le nom de conception de site Web réactif.
Étant donné que la disposition de votre site Web change et s’adapte à différentes tailles d’écran, ces images d’arrière-plan doivent également redimensionner leur taille en conséquence. En fait, ces "images fluides" sont l’un des éléments clés des sites Web réactifs (avec une grille fluide et des requêtes de médias). Ces trois éléments sont un élément essentiel de la conception Web réactive depuis le début, mais s’il a toujours été assez facile d’ajouter des images en ligne réactives à un site (les images en ligne sont les graphiques codés dans le cadre du balisage HTML). De même, les images d'arrière-plan (qui sont stylées dans la page à l'aide des propriétés d'arrière-plan CSS) constituent depuis longtemps un défi important pour de nombreux concepteurs Web et développeurs front-end. Heureusement, l'ajout de la propriété "background-size" en CSS a rendu cela possible.
Dans un article séparé, j'ai expliqué comment utiliser la propriété CSS3 taille de fond étirer les images pour les adapter à une fenêtre, mais il existe un moyen de déploiement encore meilleur et plus utile pour cette propriété. Pour ce faire, nous allons utiliser la combinaison propriété / valeur suivante:
taille du fond: couverture;
le couverture La propriété mot-clé indique au navigateur de redimensionner l'image pour l'adapter à la fenêtre, quelle que soit sa taille. L'image est redimensionnée pour couvrir la totalité de l'écran, mais les proportions et les proportions d'origine restent intactes, ce qui empêche toute déformation de l'image. L'image est placée dans la fenêtre aussi grande que possible afin que toute la surface de la fenêtre soit couverte. Cela signifie que votre page n'aura pas de points blancs ni de distorsion sur l'image, mais cela signifie également qu'une partie de l'image peut être rognée en fonction du rapport de format de l'écran et de l'image en question. Par exemple, les bords d'une image (haut, bas, gauche ou droite) peuvent être coupés sur les images, en fonction des valeurs que vous utilisez pour la propriété background-position. Si vous orientez l'arrière-plan sur "en haut à gauche", tout excès d'image apparaîtra en bas et à droite. Si vous centrez l’image d’arrière-plan, l’excédent sera éliminé de tous les côtés, mais comme cet excès est réparti, l’impact d’un côté est moindre.
Comment utiliser taille du fond: couverture;
Lors de la création de votre image d’arrière-plan, il est judicieux de créer une image relativement grande. Bien que les navigateurs puissent réduire la taille d’une image sans avoir d’impact notable sur la qualité visuelle, lorsqu’un navigateur redimensionnera une image à une taille supérieure à celle de ses dimensions d'origine, la qualité visuelle sera dégradée et floue et pixélisée. L'inconvénient, c'est que votre page subit des pertes de performances lorsque vous transmettez des images géantes sur tous les écrans. Dans ce cas, veillez à préparer correctement ces images pour la vitesse de téléchargement et la diffusion Web. En fin de compte, vous devez trouver le juste milieu entre une taille et une qualité d'image suffisamment grande et une taille de fichier raisonnable pour les vitesses de téléchargement.
L’un des moyens courants d’utiliser la mise à l’échelle des images d’arrière-plan consiste à utiliser cette image pour occuper tout l’arrière-plan d’une page, que cette page soit large et affichée sur un ordinateur de bureau ou de manière beaucoup plus petite et soit envoyée à un ordinateur de poche dispositifs.
Téléchargez votre image sur votre hôte Web et ajoutez-la à votre CSS en tant qu'image d'arrière-plan:
background-image: url (feux d'artifice sur wdw.jpg);répétition de fond: non répétée;position de fond: centre centre;attachement de fond: fixe;
Ajoutez d'abord le CSS préfixé du navigateur:
-webkit-background-size: couverture;-moz-background-size: couverture;-o-background-size: couverture;
Ajoutez ensuite la propriété CSS:
taille du fond: couverture;
Utilisation d’images différentes adaptées à différents périphériques
Si la conception réactive pour les ordinateurs de bureau ou les ordinateurs portables est importante, la variété de périphériques pouvant accéder au Web a considérablement augmenté et une plus grande variété de tailles d’écrans va de pair.
Comme mentionné précédemment, le chargement d'une très grande image d'arrière-plan réactif sur un smartphone, par exemple, n'est pas une conception efficace ou soucieuse de la bande passante.
Découvrez comment vous pouvez utiliser des requêtes multimédia pour fournir des images correspondant aux périphériques sur lesquels elles seront affichées et améliorer davantage la compatibilité de votre site Web avec les périphériques mobiles.
