Utiliser de manière transparente de grandes images d'arrière-plan sur les pages web

Question

Je veux avoir d'énormes images d'arrière-plan sur mon site, mais sans que l'utilisateur ait du mal à les télécharger et que le site soit laid lorsque l'arrière-plan se charge.

Leur taille ne dépasserait pas 1920 X 1080, mais il est difficile de se prononcer en termes de kilo-octets/méga-octets.

Quelles sont mes options ici et lesquelles sont les plus efficaces ?

Je ne suis pas trop préoccupé par la bande passante, je veux juste que l'utilisateur trouve que tout est joli ;)

Answer 1

Une option consiste à utiliser plusieurs arrière-plans. Placez un petit arrière-plan comme couche inférieure et recouvrez-le d'un arrière-plan plus grand.

Il pourrait être difficile d'avoir deux fonds si vous voulez le faire sur le corps. y veulent soutenir l'IE. La solution pourrait être de commencer par un fond de corps plus petit et d'utiliser un JS pour changer le fond à basse résolution en fond à haute résolution une fois qu'il est chargé :

var i = new Image();
i.onload = function(){document.body.style.backgroundImage = 'url(' + i.src + ')';}
i.src = 'gigantic.jpg';

---

N'oubliez pas qu'un arrière-plan de cette taille nécessite plus de RAM que ce dont disposent certains navigateurs mobiles (les iPhones pré-3GS refuseront de décoder ce type d'image ou commenceront à purger le contenu du cache/de l'onglet dans la panique).

Ce dernier problème peut être résolu grâce aux requêtes multimédias CSS :

http://lofotenmoose.info/css/destroy/media-queries-background-stretch/

Sauf requête max-device-width au lieu de (virtuel/zoomé) max-width .