Bilder[Header] einbinden

[DarkoWho]

Moin,
ich wollte mal was zum Einbinden von Bildern bzw eines Headers mit CSS wissen.

Vorweg: macht es von den Ladezeiten her einen Unterschied, ob ich nun ein z.B. 10px * 10px großes schwarzes Bild als ein großes Bild einbinde, oder ob ich es auf 1px * 1px verkleinere und dann halt per repeat-x/y vergrößere?

Zur eigentlichen Frage:

Mein Header bsteht, zumindest in Photoshop, aus mehreren Ebenen.

In HTML hab ich den Header-Bereich mit z.B. <div id="header"> definiert und
lasse jetzt mit folgendem CSS-Code die erste Ebene meines Headers anzeigen:

#header {  
	background: url(../images/header-black-bg.jpg) repeat-x #ececec;  
	width: 1020px;  
	height: 306px;  
}

Jetzt fehlen mir allerdings noch ein paar weitere Ebenen meines Headers...

Gibt es da eine Möglichkeit diese einzubinden, ohne gleich 10 neue Bereiche mit <div id="bla"> zu definieren?

[MudGuard]

Hi,

Vorweg: macht es von den Ladezeiten her einen Unterschied, ob ich nun ein z.B. 10px * 10px großes schwarzes Bild als ein großes Bild einbinde, oder ob ich es auf 1px * 1px verkleinere und dann halt per repeat-x/y vergrößere?

So gut wie nicht - die Dateigröße ist jeweils unter 100 Byte, da fallen ein paar Byte mehr oder weniger nicht ins Gewicht, wenn man berücksichtigt, was an http-Overhead zusammenkommt.

Neben der Ladezeit gilt es aber auch noch die Rendering-Zeit zu berücksichtigen - und da ist das größere Bild in den meisten Fällen besser.

Ein _einfarbiges_ Hintergrundbild ist aber in so gut wie allen Fällen unsinnig - da reicht es, einfach eine Hintergrundfarbe anzugeben.

Mein Header bsteht, zumindest in Photoshop, aus mehreren Ebenen.

Photoshop ist m.E. nicht geeignet, Webseiten zu erstellen - es dient der Graphikbearbeitung.

cu,
Andreas

[DarkoWho]

Hi,

So gut wie nicht - die Dateigröße ist jeweils unter 100 Byte, da fallen ein paar Byte mehr oder weniger nicht ins Gewicht, wenn man berücksichtigt, was an http-Overhead zusammenkommt.

Naja, das war auch mehr n Beispiel... wie schauts denn bei größeren Grafiken aus?

Photoshop ist m.E. nicht geeignet, Webseiten zu erstellen - es dient der Graphikbearbeitung.

cu,
Andreas

Ansichtssache - ich hab bis jetzt noch kein besseres Programm dafür gefunden :)

Aber allgemein gesehen ist es schon "ok", wenn man den/einen Header einfach als ein großes Bild einbindet und nicht irgendwie aufteilt?

[Malcolm Beck´s]

hi,

Naja, das war auch mehr n Beispiel... wie schauts denn bei größeren Grafiken aus?

Kommt drauf an, was in dem Bild ist. Wenn's nur 'n kleiner Farbverlauf ist, der auf x wiederholt wird, dann ruhig etwas breiter als 1px speichern; der Grösse des Bildes tut es fast nichts, aber dem Browser tut es gut, da dieser das Bild nur 110 mal wiederholen muss, statt 1100.

Aber allgemein gesehen ist es schon "ok", wenn man den/einen Header einfach als ein großes Bild einbindet und nicht irgendwie aufteilt?

Ich kam mit 3 hin.
http://dj-tut.de/css/images/image_map.jpg
http://dj-tut.de/css/images/image_map_2_a.gif
http://dj-tut.de/css/images/main_content.jpg

Wobei mir das 2 zuviel sind.

Youtube greift auch gerne auf diese technik zurück.

mfg