Regardez les sites Web populaires aujourd'hui et un traitement de conception que vous êtes sûr de voir est de grandes images d'arrière-plan couvrant l'écran. L'un des défis liés à l'ajout de ces images provient de la meilleure pratique selon laquelle les sites Web doivent répondre à différentes tailles d'écran et appareils - une approche connue sous le nom de site Web adaptatif.
Une image pour plusieurs écrans
Étant donné que la mise en page de votre site Web change et s'adapte à différentes tailles d'écran, ces images d'arrière-plan doivent également adapter 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 médiatiques). Ces trois éléments sont un élément essentiel de la conception de sites Web réactifs depuis le début, mais s'il a toujours été assez facile d'ajouter du réactif images intégrées à un site (les images intégrées sont les graphiques qui sont codés dans le cadre du balisage HTML), faire de même avec les images d'arrière-plan (qui sont stylisés dans la page à l'aide des propriétés d'arrière-plan CSS) a longtemps constitué un défi important pour de nombreux concepteurs de sites Web et front-end développeurs. Heureusement, l'ajout de la propriété "background-size" dans CSS a rendu cela possible.
Dans un article séparé, nous avons expliqué comment utiliser le Propriété CSS3 background-size pour étirer les images pour qu'elles tiennent dans une fenêtre, mais il existe un moyen encore meilleur et plus utile de déployer pour cette propriété. Pour ce faire, nous utiliserons la combinaison de propriétés et de valeurs suivante:
taille de l'arrière-plan: couverture;
La propriété du mot-clé cover indique au navigateur de mettre l'image à l'échelle pour qu'elle s'adapte à la fenêtre, quelle que soit la taille de cette fenêtre. L'image est mise à l'échelle pour couvrir tout l'écran, mais les proportions et le rapport hauteur/largeur d'origine sont conservés intacts, empêchant ainsi la distorsion de l'image elle-même. 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 vous n'aurez pas de points blancs sur votre page ni de distorsion sur l'image, mais il signifie qu'une partie de l'image peut être rognée en fonction du rapport hauteur/largeur de l'écran et de l'image dans question. Par exemple, les bords d'une image (en haut, en bas, à gauche ou à droite) peuvent être coupés sur les images, selon les valeurs que vous utilisez pour la propriété background-position. Si vous orientez l'arrière-plan vers "en haut à gauche", tout excès sur l'image se détachera des côtés inférieur et droit. Si vous centrez l'image d'arrière-plan, l'excès se détachera de tous les côtés, mais comme cet excès est étalé, l'impact sur un côté sera moins utile.
Comment utiliser 'background-size: cover;'
Lors de la création de votre image d'arrière-plan, c'est une bonne idée de créer une image assez grande. Alors que les navigateurs peuvent réduire la taille d'une image sans impact notable sur la qualité visuelle, lorsqu'un navigateur agrandit un image à une taille supérieure à ses dimensions d'origine, la qualité visuelle sera dégradée, devenant floue et pixelisé. L'inconvénient est que votre page prend un coup de performance lorsque vous diffusez des images géantes sur tous les écrans. Lorsque vous faites cela, assurez-vous de bien préparer 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 grandes et une taille de fichier raisonnable pour les vitesses de téléchargement.
L'une des façons courantes d'utiliser la mise à l'échelle des images d'arrière-plan est lorsque vous souhaitez que cette image occupe tout l'arrière-plan d'une page, si cette page est large et affichée sur un ordinateur de bureau ou beaucoup plus petite et est envoyée à un ordinateur de poche, mobile dispositifs.
Téléchargez votre image sur votre hébergeur et ajoutez-la à votre CSS en tant qu'image d'arrière-plan:
image d'arrière-plan: URL (fireworks-over-wdw.jpg);
background-repeat: pas de répétition ;
position d'arrière-plan: centre au centre ;
pièce jointe d'arrière-plan: 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 de l'arrière-plan: couverture;
Utilisation de différentes images adaptées à différents appareils
Bien que la conception réactive pour une expérience de bureau ou d'ordinateur portable soit importante, la variété des appareils qui peuvent accéder au Web a considérablement augmenté, et une plus grande variété de tailles d'écran est fournie avec cette.
Comme mentionné précédemment, le chargement d'une très grande image d'arrière-plan réactive sur un smartphone, par exemple, n'est pas une conception efficace ou soucieuse de la bande passante.
Découvrez comment vous pouvez utiliser requêtes média pour diffuser des images adaptées aux appareils sur lesquels elles seront affichées et améliorer encore la compatibilité de votre site Web avec les appareils mobiles.