Hintergrund durch Grafik ersetzen

[Meppi]

Guten Tag,

ich möchte meinen Hintergrund durch eine Grafik/Bild ersetzen.

Kann mir jemand sagen, welche Dateigröße dieses haben sollte, damit es nicht Performanceverlusten kommt? Und welches Dateiformat sich empfiehlt?

Grüße

Linkback: https://www.modified-shop.org/forum/index.php?topic=30928.0

[ideeos.de]

Damit die Grafik auf allen Bildschirmen optimiert ausgerichtet wird, ist das CSS wichtiger, als die Bildgröße.

Code: CSS  [Auswählen]

html {
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Die Bildgröße würde ich immer mit Full HD (1920x1080) Größe anlegen.

[Meppi]

Hey Danke....

also ganz normal als Dateiformat JPG wählen?

Auf welche Größe würdet ihr es optimieren?

Muß ich irgendwas beachten, daß es auch bei langen Seiten (verschachteltes Menü) keine Probleme gibt?

[ideeos.de]

Die CSS Anweisung passt das Bild für dich automatisch an die Bildschirmgröße an. IE wie immer ausgeschlossen. Sicherlich gibt es da auch noch Filter, einfach suchen.

Soll das Bild den Content umschliessen ist es wichtig, dass du die Breite des Grids kennst. Meistens 960 bzw. 1170 px. Dann machst du dir einfach eine Schablone und baust um diese das Bild.

[Meppi]

Und die Dateigröße? Egal, ob 50 KB, 200 KB oder 5 MB? Ich frage, weil die Grafiken meines Shops jetzt schon 80% der Ladezeit einnehmen lt. diverser Speedtestseiten.

[ideeos.de]

Wenn du die Pixelgröße wie oben beschrieben anpasst und die Datei als jpg oder png abspeicherst, kommst du automatisch auf unter 1 MB. 5 MB ist ein schlechter Wert.

[Meppi]

Na da bin ich mal gespannt was danach der Speedtest sagt. Jetzt habe aktuell 50 kb als Hintergrund, wenn ich dann nahe 1MB komme......

[Meppi]

Moin....hab das Bild (HD Größe) nun in den Ordner gelegt und es wird auch angezeigt.

Problem ist, daß scheinbar die linke obere Hälfte vom Bild genommen wird (jedenfalls in meiner Bildschirmansicht) und nicht das ganze Bild....also aus dem Zusammenhang gerissen. Der Shop liegt also nun auf ca. 1/4 des Bildes....

Versteht ihr was ich meine? Wie bekomme ich es hin, daß das Bild in 100% Größe im Hintergrund eingebunden wird!?

[Christian|PCE]

In meinem Blog habe ich das wie folgt gemacht:

Code: CSS  [Auswählen]

body.custom-background {
    background-image: url('bild.jpg');
    background-repeat: repeat;
    background-position: left top;
    background-attachment: fixed;
}

Evtl. helfen dir die drei letzten Angaben zum Background weiter

[Meppi]

Hmm "body.custom-background" habe ich garnicht in der stylesheet. Sorry bin Anfänger im "Selbermachen" 

[Christian|PCE]

Ja ne, schon klar das du das nicht hast Solltest ja bei dir in background oder wie auch immer die Funktion heißt (kann nicht nachsehen gerade) folgende Dinge mal einbauen:

Code: CSS  [Auswählen]

    background-repeat: repeat;
    background-position: left top;
    background-attachment: fixed;

Evtl. geht es damit wenn dasBild in 1920x1080 vorliegt.

[ideeos.de]

Wie schon geschrieben mit COVER. Post doch bitte den Shoplink.