verwendet Nahtlos große Hintergrundbilder auf Web-Seiten

Question

Ich mag große Hintergrundbilder auf meiner Seite haben, aber ohne dass der Benutzer eine harte Zeit gibt sie und die Website sucht hässlich wie die Hintergrundlasten Download bereit.

Sie würden als 1920 nicht größer sein X 1080 in der Größe, aber es ist schwer, in Bezug auf Kilobyte / Megabyte zu sagen.

Was sind meine Optionen hier und die sind am effektivsten?

Ich bin auch nicht über die Bandbreite gestört, möchte nur Benutzer denken, alles sieht gut aus;)

Answer 1

Eine Möglichkeit ist, mehrere Hintergründe zu verwenden. Habe kleinen Hintergrund als untere Schicht und decken Sie es mit größerem Hintergrund.

Es könnte schwierig sein, zwei Hintergründe zu haben, wenn Sie es auf Körper wollen und wollen IE unterstützen. Lösung könnte darin bestehen, kleinen Körper Hintergrund verwendet JS zu ändern Low-Res-Hintergrund in hohen Auflösung, wenn es Belastungen zu starten:

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

---

Beachten Sie, dass solche großen Hintergrund braucht mehr RAM als einige mobile Browser haben (iPhones vorge 3GS wird entweder ablehnen solches Bild überhaupt zu dekodieren oder wird Spülen Cache / Tab Inhalt in Panik starten).

Das letztere Problem mit CSS Media Queries, um gearbeitet werden kann:

http://lofotenmoose.info/css/destroy/media- Anfragen-Hintergrund-Dehnungs /

Mit Ausnahme Abfrage max-device-width statt (virtual / gezoomt) max-width.