Farblich hinterlegtes Logo erstellen

[kreuzzug]

Guten morgen zusammen,
ich arbeite z.Z. an einer Homepage mit HTML,PHP und CSS.
Ich würde gerne als Seitenüberschrift einen gefärbten Balken verwenden,
Breite mal Höhe etwa 100%x10%. Auf diesen Balken möchte ich, mit Photoshop freigestellte Bilder einfügen. Als Ergebnis sieht man dann also die verschiedenen Motive nebeneinander und im Hintergrund den gefärbten Balken.

Meine Frage:Wie macht man das am besten?

1. Entweder mit CSS den Balken erstellen und Bilder einzeln mit HTML auf den Balken laden?

2. Balken inkl. Bilder als EIN Bild speichern und nur dieses dann auf der Seite laden?(Klingt logischer für mich)

Noch eine kleine Frage:Gibt es einen Trick, wie es dann auf allen Bildschirmauflösungen gleich aussieht?Reicht es dafür alles in % anzugeben? Das würde ja Probleme mit den Bildern geben, da diese dann u.U. verzogen aussehen würden.
Danke schonmal,

 

[prm]

Beide Alternativen sind möglich.
Du kannst einem DIV eine Hintergrundfarbe zuweisen und darein die Grafiken positionieren.
Erfordert möglicherweise etwas weniger Speicherplatz als eine Grafik mit Hintergrund (dürfte jedoch nur marginal sein), dafür aber mehr Quellcode, auch für die Positionierungen der einzelnen Bilder.

Einfacher wäre es, wenn du gleich eine einheitliche Grafik verwenden würdest, in der sowohl Hintergrund als auch die Einzelgrafiken eingebunden sind.

Eine Grafik hat immer einen festen Breiten- und Höhenwert.
Du kannst theoretisch auch 100% angeben, allerdings kann dies je nach Viewportgrößen zu Verpixelungen und Verzerrungen führen. Somit ist diese Variante nicht unbedingt empfehlenswert.

Ich kenne deine Grafik nicht. Wenn du es aber geschickt anstellst (und es sich einrichten lässt), kannst du mit einem kleinen Trick auch immer auf 100% kommen. Sieh dir hierzu einmal diese Anleitungen an:
Dynamische Hintergrundgrafik
Dynamische Flüssigbilder

 

[kreuzzug]

Hey Danke,
also habe mir schon gedacht das es besser wäre eine einheitliche Grafik zu verwenden, in der alles enthalten ist.
Aber das mit der "dynamischen Grafik" sieht gut aus. Ich könnte ja als "Mitte" meinen farbigen Balken verwenden, der eben umso breiter wird, je höher die Bildschirmauflösung gewählt wird.

Was ich mir sonst gerade noch überlegt habe, wäre
z.B. mit Corel-Draw einen farbigen Balken in der Größe (bxh) 2000x200 pixel zu wählen (entspricht ja meinem vorhaben von 100%x10%) dieser würde auf jeden Fall auch zum ausfüllen der höchsten Bildschirmauflösung reichen. Auf diesem Balken platziere ich durch "importieren" die Motive und exportiere das Gesamtwerk zum Beispiel als "JPG". Nun kann ich es in der Größe 100%x10% in die Web Seite einnbinden und selbst die Grafiken sind immer richtig skaliert. Weil 10:1 ist immer 10:1 ,egal ob bei 1024:768 oder 1680:1050 Auflösung.
NACHTEIL: Mehr Speicherplatz verbrauch.
ABER: Man könnte das Bild ja auch auf flickr.com oder Bilderspeicher.de verlinken und somit deren Speicherplatz verwenden ;)

 

[kreuzzug]

P.S: Habe die Methode die gerade mit "Corel-Draw" beschrieben habe getestet, funktioniert super!!! Und die Grafik ist auch recht klein.
Mit 10 Bildern plus Hintergrund gerade mal 300kb. ;Jump

 

[prm]

300kb sind für eine Website-Grafik schon sehr viel. Je nach Datenübertragung kann das zu einer relativ langen Ladezeit führen.
Wenn möglich solltest du versuchen, die Grafik noch zu komprimieren.