Utiliser de façon transparente de grandes images de fond sur les pages Web

Question

Je veux avoir d'énormes images de fond sur mon site, mais sans donner à l'utilisateur un moment difficile de les télécharger et le site regardant laid que les charges de fond.

Ils seraient pas plus grand que 1920 X 1080 en taille, mais il est difficile de dire en termes de kilo-octets / méga-octets.

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

Je ne suis pas pris la peine de la bande passante, je veux juste à l'utilisateur de penser tout semble bien;)

Answer 1

Une option consiste à utiliser plusieurs arrière-plans. Avez-petit arrière-plan en tant que couche de fond et le couvrir avec un fond plus large.

Il peut être difficile d'avoir deux arrière-plans si vous le voulez sur le corps et veulent soutenir IE. Solution peut-être commencer plus petit utilisation de fond du corps JS pour changer de fond basse résolution à haute résolution, une fois il charge:

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

---

Gardez à l'esprit que ce grand fond a besoin de plus de RAM que certains navigateurs mobiles ont (iPhone 3GS pré-refuseront de décoder cette image au tout ou commencera cache purge / contenu onglet dans la panique).

Le dernier problème peut être contourné avec CSS médias Requêtes:

http://lofotenmoose.info/css/destroy/media- les requêtes de fond extensible /

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