Teetasse: Skalieren von grafigen (Geschwindigkeit)

Hallo,

für eine Webseite möchte ich als Hintergrund ein Bild verwenden, das den vollen Bildschirm ausfüllt, ohne sich zu wiederholen, und das beim Scrollen an seiner Position bleibt. Das Bild darf/muss verzerrt dargestellt werden.

Da css:background-image kein Skalieren des Bildes erlaubt, habe ich in ein <div> mit den CSS-Eigenschaften position: fixed; width: 100%; height: 100%; ein <img> mit einer Breite und Höhe von jeweils 100% eingefügt.

Es funktioniert super - einziges Problem: Das Scrolen ist extrem(!) langsam und ruckelig. Es scheint, als würde der Browser jedes mal das Bild neu skalieren.

Gibt es vielleicht eine Möglichkeit, um das mehrmalige Skalieren zu verhindern? Lässt sich die Grafik vielleicht nach dem Skalieren zwischenspeichern? Oder eine eine andere Möglichkeit, die Aufgabe zu lösen?

Danke und Gruß
Teetasse

  1. für eine Webseite möchte ich als Hintergrund ein Bild verwenden, das den vollen Bildschirm ausfüllt, ohne sich zu wiederholen, und das beim Scrollen an seiner Position bleibt. Das Bild darf/muss verzerrt dargestellt werden.

    Da css:background-image kein Skalieren des Bildes erlaubt

    Möglicherweise ist background-size dein Freund. Laut MDN auch durchaus weit verbreitet.