[Faune]

Howdy,

wie man jetzt oft sieht nehmen manche ganze Bilder (zb Wolken) als Hintergrundbilder.

Jetzt würde ich auch gern sowas probieren hab aber kein Plan wie groß das max/min sein muss

dankö

[Smooth-Graphics]

Also es soll komplett über den Hintergrund sich erstrecken?
Dann ist es sinnvoll, wenn man eine Auflösung von ca. 1600x1000 oder ähnliches annimmt. Dann kannst du den Hintergrund eine Größe von 100% zuweisen. So sieht es downsampled und upsampled eigentlich am besten aus.

Zusätzlich kann man natürlich per JS die Auflösung des Users auslesen, dann entscheiden, ob man ein kleineres (1024x???px) oder ein größeres laden lässt. So kann man noch ein wenig auf den User eingehen, bzgl. Ladegschwindigkeit.

[Faune]

Hmm danke habe ich gemacht aber wie mache ich das mit den 100%

[m]

Du kannst ein Hintergrundbild nicht mit einer width oder height Eigenschaft versehen,
jedenfalls noch nicht nicht …

[Faune]

hmm das heißt mein Hintergrundbild muss doch größer als 1600x1000 sein ?

[top]

[Krisslinger]

Da dein Hintergrund in allen Auflösung ordentlich aussehen soll und es momentan noch nicht möglich ist, dem Hintergrundbild eine Größe zu geben gibt es nur die Möglichkeit das Hintergrundbild zu kacheln, dh das Bild wiederholt sich.
Allerdings musst du dann aufpassen, dass sich das Bild wiederholen lässt, ohne dass eine Kante zu sehen ist. Dazu eine Grafik erstellen, die an der rechten Seite so aufhört, wie sie auf der Linken anfängt, und am besten unten so aufhört wie sie oben anfängt

Das Problem in diesem Fall ist, dass sehr schnell das Muster auffällt, man die Wiederholungen sieht. Wenn du dieses Bild aber schon mal 1000 Pixel oder mehr breit machst, dann lässt sich das auch vertuschen.

Die andere Möglichkeit ist, dass du ein Hintergrundbild anlegst, das sehr groß ist, 2500 Pixel breite sollte die meisten Monitore ohne Probleme abdecken, der Nachteil ist hier die ziemlich große Dateigröße und der zwar seltene, aber doch mögliche Fall, dass jemand mit einer sehr hohen Monitorauflösung von über 2500 Pixeln breite (gibts sowas aktuell ) die Seite besucht und dann entweder die eingestellte Hintergrundfarbe sieht, oder eine unsaubere Kante, da sich das Bild wiederholt.

Und eine dritte Möglichkeit, die funktionieren sollte, ist mittels z-index in den Hintergrund einen Container legen, in dem das Bild mit einem normalen <img> Tag eingebunden wird und die Breite von 100% erhält. Wenn das Bild in einer ausreichenden Größe angelegt worden ist, sieht es auch bei größeren Auflösungen noch gut aus. Das ist aber eine nicht so tolle Lösung.

Jetzt kannste dich entscheiden 1, 2 oder 3