Responsive background-image

La conception Responsive impose des contraintes de performance et d'adaptation selon le terminal utilisé. Pour les images en ligne classiques, l'utilsation de balises picture figure et les attributs ad hoc de gestion de sources selon les viewports gèrent facilement cette nécessité.

Concernant les images gérées en arrière plan, il devient plus compliqué de fournir des formats adaptés à la taille d'affichage et à la qualité de la bande passante. Il n'est pas rare de distribuer des images de très grandes dimensions dans des zones réduites, notamment en mobile.

Un petit script va résoudre ce souci et améliorer l'expérience utilisateur au passage.

Exemple

Redimensionner le navigateur pour appliquer le changement d'image de fond

Code

Nécessite jQuery

Appel de la fonction

Redimensionner le navigateur pour appliquer le changement d'image de fond

Utilisation des sources
Les sources de « Responsive background-image » proposées par sont mises à disposition selon les termes de la licence Creative Commons CC BY-NC-SA 4.0 (licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions).
Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…
Un petit sou avec
Droits réservés 2006-2021 Kortic - Anthony Ladeuil Dépôt ISSN 2610-1297
2021-01-22