Vollflächiges Hintergrundbild

    Ich spiele hier seit ein paar Tagen an meiner Webseite, besser gesagt dem Hintergund. Farbe ist schon gewechselt, aber eigentlich möchte ich ein Hintergundbild haben. Nur irgendwie scheitere ich da etwas.

    Die neue Farbe ist schon mal hier: *** Link veraltet ***

    Ein Testlauf mit einem Bild ist hier: *** Link veraltet ***

    So, nun ist dieses Hintergundbild aber zu verpixelt und gleichzeitig die Dateigröße dennoch etwas zu groß. Mache ich die Qualität besser, dann ist es viel zu groß (400kB und mehr). Wie macht man das denn? Habe nun schon genug Webseiten gefunden mit sehr großen Hintergrundbilder (>1300 width) und dennoch unter 100kB und eben nicht verpixelt. z.B. *** Link veraltet *** (bitte am Tag / Mittag ansehen, da wechselnde Bilder). Das BIld finde ich schön, auch hierf dem 24 Zoll, nicht zu sehr verpixelt und dennoch "klein" (97kB oder so). Das schaffe ich irgendwie nicht. Hier gibt es immer nur ein entweder oder.

    Dann das Thema Einbindung: Wie ist es am sinnvollsten? Aktuell ist es als Div mit z-index:0 eingebunden. Das geht. Aber: Hier kann ich dann nicht auf andere Auflösungen reagieren, z.B. Smartphone etc. Als CSS einbinden geht auch, aber background-size (was ich benötige, oder????) kann nicht jeder Browser.

    Fragen über Fragen... Hat das schon einer von euch gemacht?

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    CSS 3 stellt Dir background-size:cover zur Verfügung. Habe zig Seiten mit Hintergrundbild, allerdings habe ich es bisher nie unter 138kb geschafft. Problematisch wird das Scrollen bei einigen iOS und anderen mobilen OS/Browsern. Wichtige Arbeitsweisen: Bilder mit viel Flächen auswählen (Dein Baum ist zu filigran, treibt die Bildgröße in die Höhe), um dann bei Smush.it & ähnlichen Diensten viel runterrechnen zu können. Smartphones etc. können per Media Queries abgefangen werden.

    Geht auch mit "Prozent + auto". Das Hauptproblem, die Pixelei und die Dateigröße bleibt dennoch und zwar umso heftiger, je detailreicher ein Bild ist. Ganz ganz vorsichtig musste mit roten Elementen sein, die schmieren am schnellsten.

    Er war Jurist und auch sonst von mäßigem Verstand.

    (Volker Pispers)

    Hm, dann liegt das also wohl am Bild und ich muss mir ein anderes suchen. Rot möchte ich nicht, das Problem scheidet aus. Wollte schon was grün / blau, also Landschaft, Bäume, Himmel oder so.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    Mir ist aufgefallen, dass man Bilder von Strand und Meer (am Besten in Kombination mit viel blauem Himmel) relativ "klein" kriegen kann.
    Wahrscheinlich wegen der recht großen Flächen, die eher einfarbig und somit wenig filigran sind. (Margin möge mich korrigieren, damit ich auch mal was lerne)

    Ich werde in der nächsten Zeit wahrscheinlich mal wieder auf einer unserer Inseln sein und dort dann natürlich auch Bilder von Dünen, Strand & Meer machen.
    Ich kann Dir dann auf Wunsch gerne mal das eine oder andere Bild zukommen lassen, dass für Dich als Hintergrund ja ggf. interessant sein könnte. (Hast ja auch viele Ferienunterkünfte an der Nordsee im Angebot)

    Jo, das wäre nett, allerdings muss da schon ein grün dabei sein :) Testweise habe ich da schon andere Bilder verwendet, nur wegen der Optik und die passten alle nicht so wirklich. Hatte auch ein anderes vorher mit hellerem, leuchtenderen grün, das hatte sich aber auch mit der Seite gebissen.

    Habe mir vorhin auch noch mal das Bild von der Wetterseite angesehen und das spricht auch dafür. Das ist Himmel, Wiese und Blumen im Vordergund. Himmel und Blumen sind scharf, die Wiese aber komplett weichgezeichnet. Wohl genau aus dem Grund, dass die filigranen Dinge weg sind. Mal sehen wie weit ich da komme. Den Baum in der Mitte des Bildes brauche ich auch gar nicht, der kann da eigentlich komplett raus. Oben ein Fitzelchen, unten etwas und primär rechts und links. Direkt in der Mitte sieht man das Bild eh nicht.

    Ok, aber mal die Frage in die andere Richtung. Was wäre denn eine akzeptable Bildgröße bei (>1300px width, besser sogat 1900px)? 200kB, 300kB oder was? Kann mir das leider nich so wirklich vorstellen, denn selbst das Originalbild mit 6MB ist binnen 3 Sekunden da.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    Wenn grün dabei sein sollte, dann sind die Inselstrände weniger gut geeignet, als beispielsweise der Grasstrand in Neuharlingersiel, wo ich das nächste Mal spätestens Mitte Mai sein werde.
    Wenn dann etwas schönes Wetter ist, könnte man da wahrscheinlich ein gutes Hintergrundbild schiessen.
    Unten das grün des Strandes, etwas höher im Bild die Nordsee, noch etwas höher die entfernt zu erkennende Insel Spiekeroog und ganz oben blauer Himmel (mit ggf. der einen oder anderen Schäfchenwolke)

    Änliche Bilder von diesem Neuharlingersieler Strand habe ich schon öfter gemacht. Leider habe ich derzeit kein brauchbares Bild mehr vorliegen, da bereits alle Verwendung gefunden haben.

    Jedenfalls ist das eine Kunst für sich, das merke ich schon. Habe nun noch ein paar Bilder gefunden, gefallen mir auch teils recht gut. Aber was man da alles beachten muss... Einfach so ein Bild reinsetzen ist ja nicht. Das braucht ein bestimmtes, passendes Format. Muss auch noch gut aussehen, wenn das Fenster verkleinert wird und hochkant muss es auch gehen. 100% in alle Richtungen geht ja auch nur bedingt, sonder wird da alles zerquetscht. Habe es nun nur in der Breite. Folge aber, bei bestimmten Auflöungen hört das Bild unten früher auf. Also auch hier dann ein Bild nehmen, das einen sauberen Übergang auf den Hintergrund ermöglicht. Tzzztzzz, warum ist das alles so kompliziert.

    Aber Chris, nochmal zu Deinem CSS.
    Dieses background-size hatte ich ja als aller erstes versucht. Geht auch, keine Frage. Wäre mir auch lieber, eben wegen den Media-Queries. Nur, was passiert bei Browsern, die kein CSS3 können? Gibt es eigentlich eine Möglichkeit das vorab zu ermitteln oder eine Art Hack oder was, also dass man weiß, CSS3 wird unterstützt oder nicht und man dann eben auf andere Styles ausweichen kann?

    Edit: Wobei... Das müsste ja über die Media-Queries gehen, denn die sind ja auch CSS3. Wenn die ausgeführt werden, dann Hintergrundbild rein, wenn nicht, dann halt einfach weg lassen.

    Das aber dann die Tage irgendwann. Hab schon Kopfschmerzen....

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    WENN ich überhaupt an großflächige Fotos gehe, also bspw. wie bei Dir als Hintergrund, dann gibt es da 2 Dinge, die als allererstes erledigt werden, bevor ich überhaupt mit Komprimieren usw. anfange:

    1. Der gesamte nicht benötigte Mittelteil des Fotos, also der Bereich, wo auf jeden Fall immer Content drüber liegt, wird entfernt / einfarbig.

    2. Die Ränder kriegen einen leichten Farbverlauf in der Hintergrundfarbe als Übergang, damit es keine hässlichen Absätze gibt.

    Er war Jurist und auch sonst von mäßigem Verstand.

    (Volker Pispers)

    Also grosse Bilder jage ich ja erst durch Photoshop und spiele so lange rum, bis es nicht mehr kleiner geht. Egal ob das dann jpg, gif oder png ist. Dann nochmal mit smooshIt rüber und gucken.

    Die Slidergrafiken hier hatten mal jedes über 480kb. Jetzt noch 35-22kb. *** Link veraltet ***
    Wenn Du das Original nicht kennst, sehen die immer noch gut aus. Und da sind auch Haare und Details erkennbar. Grösse ist 1200 x 420 oder so.

    Du könntest das Hintergrundbild auch als eigene CSS-Klasse einbinden und aus der CSS aufrufen. Das CSS bindest Du ganz am Ende vor dem </body> ein. Es kann ja ruhig eine CSS-Datei mit nur dieser einen Klasse sein. Da kannste auch noch gleich eine @media-Abfrage machen und je nach Monitorgrösse oder Endgerät eine passende Hintergrundgrafik einbinden.


    Das ist jetzt der Code, wie ich responsive Ads injecte. Du mußt nur statt "width: 320px; height: 50px;" usw. die URL zur Bilddatei einfügen

    Wer zuerst "Datenschutz" sagt, hat verloren.

    Ja, so in etwa würde ich das letztenlich auch machen, nur nicht mit festen Breiten, sondern eben 100%, aber für die verschiedenen Browser verschiedene Ausgnagsbilder verwenden. Ein 1024er braucht ja kein 1920er Bild ;) Das mit dem fliesenden Übergnag auch, unten zumindest. Oben, links und rechts ist es ja am Rand. Aber ich merke schon, das ist eine schweine Arbeit, da erst mal ein Bild zu finden, zu bearbeiten und dann herrauszufinden, dass da die Größe mal wieder nicht weit genug runter geht.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    Ja, das hatte ich oben vergessen. Guter Ansatz. Hatte das schon mal irgendwo gesehen (vielleicht bei Dir?). Habe es auch bei einem Bild versucht, allerdings sparte das nur 2kb ein und falsch war es auch noch platziert. Meine Seite "wandert" ja etwas von links nach rechts und ändert auch bei bestimmten Auflösungen die Größe. Da hatte ich mich vergriffen und plötzlich war der schwarze "Kasten" rechts etwas zu sehen ;)

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    So, irgenwas scheint da aber vorher richtig schief gelaufen zu sein. Habe das mit dem schwarzen Kasten eben nochmal mit einem anderen Bild versucht und da ging es von 797kb runter auf 492kb :)
    *** Link veraltet ***

    Das finde ich ehrlich gesagt auch nicht schlecht, die Farben passen gut... Ist auch runter auf unter 200kb :)
    *** Link veraltet ***

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    13d gefällt mir auch, allerdings taucht dabei unten der schwarze Kasten auf (ich bin übrigens anders als Margin kein großer Freund dieser Kästen auf Hintergrundbildern, aber ich habe oft auch den Vordergrund so luftig, dass der Hintergrund überall auftauchen kann)

    Chris
    Das Problem habe ich nun schon an mehreren Stellen entdeckt. Auf der Beispielseite geht es noch sehr gut, da sind unten 2 mm von dem Kasten (könnte ich durch andere Bilder für andere Auflösungen weg bekommen), aber auf anderen Seiten, wo der Content-Bereich nur halb so hoch ist, habe ich echte Probleme damit. Da sind dann teilweise 7 oder 8 cm von dem Kasten unten zu sehen.

    13d also. Muss ich mir nochmal ansehen, was das war. Ich spiele gerade mit den vieren hier (die ersten drei gefallen mir eigentlich am besten)
    *** Link veraltet ***
    *** Link veraltet ***
    *** Link veraltet ***
    *** Link veraltet ***

    Ah, 13d, ok. Das ist eigentlich der gleiche Bereich wie das 5b. 13d war vor dem Turm, 5b dahinter. Ansonsten Weinberg, Weg, diese Mauer und der Himmel. Finde gerade die Mauer sehr passend.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    Hm, also dieses "background-size: cover" ist ja genial. Da braucht es ja gar keinen Farbverlauf in die Hintergrundfarbe, denn das Bild ist immer auf maximaler Größe :) Ich Depp hatte das vorher nicht mit "cover", sondern 100% versucht und das ging nicht so perfekt.

    Und mit dem alten IE8 klappt es auch. Der lässt das Bild einfach in Originalgröße, auch beim Fenster verkleinern / vergrößern. Stört nicht weiter, fehlt dann halt ein Teil vom Bild, aber das ist in Ordnung.

    Man merkt, ich habe mich noch nie bzw. so gut wie noch nie mit Hintergrundbilder auseinandergesetzt :)

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    Ich auch nicht, bevor Chris es erwähnte :) War auf dem Trichter "background-size: 100%" und das eben genau so. Dass man da sogar zwei Werte übergeben kann (Breite und Höhe) wusste ich auch nicht. Hatte da direkt als erstes ein völlig unbrauchbares Beispiel gefunden und es dann direkt mit dem CSS sein lassen.

    Aber so nun, das geht echt gut:
    *** Link veraltet ***

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(