Hallo Leute,
bin gerade beim Erstellen einer Webseite für eine Freundin. Ihr Wunsch ist ein großes Bild im Hintergrund, welches fix stehen bleibt, während der Content darüber scrollt. Das Bild also via CSS3 mit "background: url(meinBild.jpg);" eingesetzt und mit "background-size: cover" auf die Bildschirmgröße skaliert. Bei dem Bild handelt es sich um ein JPG mit 1024 × 683 px. Während ich dann den Content eingefügt habe (ein bisschen Text und 4 Bilder), merke ich, dass mit Safari (aktuelle Version 9.0) kein flüßiges Scrollen mehr möglich ist.
Nach ein wenig Rumprobieren merke ich, dass es wohl an"background: url(meinBild.jpg);" liegt. Kommentiere ich die Zeile aus, ist mein Hintergrund natürlich wieder weiß, aber das Scrollen funktioniert absolut flüßig. Setze ich wieder das Bild in den Hintergrund und deaktiviere die Skalierung via "background: cover;" kommt das Ruckeln zurück, ist allerdings nicht so gravierend wie mit Skalierung.
Wisst ihr eine evtl. eine gute Alternative zu background:cover? Wie lösen professionelle Webprogrammierer so etwas? Ich denke nicht, dass das Bild mit einer Auflösung von 1024 × 683 px und 176 kb zu groß ist? Es gibt doch einige Webseiten, die Bilder als Hintergrund nutzen. Wie kriegen die eine gute Performance hin?
Danke schonmal, für eure Hilfe!
bin gerade beim Erstellen einer Webseite für eine Freundin. Ihr Wunsch ist ein großes Bild im Hintergrund, welches fix stehen bleibt, während der Content darüber scrollt. Das Bild also via CSS3 mit "background: url(meinBild.jpg);" eingesetzt und mit "background-size: cover" auf die Bildschirmgröße skaliert. Bei dem Bild handelt es sich um ein JPG mit 1024 × 683 px. Während ich dann den Content eingefügt habe (ein bisschen Text und 4 Bilder), merke ich, dass mit Safari (aktuelle Version 9.0) kein flüßiges Scrollen mehr möglich ist.
Nach ein wenig Rumprobieren merke ich, dass es wohl an"background: url(meinBild.jpg);" liegt. Kommentiere ich die Zeile aus, ist mein Hintergrund natürlich wieder weiß, aber das Scrollen funktioniert absolut flüßig. Setze ich wieder das Bild in den Hintergrund und deaktiviere die Skalierung via "background: cover;" kommt das Ruckeln zurück, ist allerdings nicht so gravierend wie mit Skalierung.
Wisst ihr eine evtl. eine gute Alternative zu background:cover? Wie lösen professionelle Webprogrammierer so etwas? Ich denke nicht, dass das Bild mit einer Auflösung von 1024 × 683 px und 176 kb zu groß ist? Es gibt doch einige Webseiten, die Bilder als Hintergrund nutzen. Wie kriegen die eine gute Performance hin?
Danke schonmal, für eure Hilfe!
