HTML Bachground mit Bild

Hallo Markus

Also erstmal wirst du ein transparentes Bild im Gif Format brauchen um dein Ziel zu erreichen.

[html]

[/html]

Oder du nimmst einfach dein Bild was du jetzt erstellt hast und bindest das ein.

Gruß
Jörg

RuleBreaker18 schrieb:

Hey ihr lieben,

wie kann ich auf einer html farb unterlage (z.B: <font-color="#000000">) ein bild draufpacken? Siehe:

Mal abgesehen davon, dass "font-color" eher nicht den Hintergrund angibt, möchtest Du das so nicht verwenden.

CSS:

background-color: #000;
background-image: url(/path/to/image);

sollte helfen, wenn das Bild entsprechend passt (transparent oder passende Hintergrundfarbe).

Marc

joerg schrieb:

Hallo Markus

Also erstmal wirst du ein transparentes Bild im Gif Format brauchen um dein Ziel zu erreichen.

....

Ich glaub PNGs sind besser geeignet als GIFs, denn so eine Grafik mit 256 Farben ist nicht gerade schön anzusehn, vor allem wenn Farbverläufe mit im Spiel sind.

Ultima schrieb:


Ich glaub PNGs sind besser geeignet als GIFs, denn so eine Grafik mit 256 Farben ist nicht gerade schön anzusehn, vor allem wenn Farbverläufe mit im Spiel sind.

Hallo Thomas,

wenn Du Dir das Bild oben ansiehst, dann benötigt er genau 2 Farben - fff und 900 oder ähnliches, oder für fff tranparent, bei Marcs Lösung.
Was will er dann mit PNG wenn er mit GIF eine viel schlankere Datei haben kann?
Optisch gibt es keinen Unterschied.

hansen

Bei gif-Grafiken gibt es kein Transparenz-Antialiasing. Daher hast du bei gifs immer solche schönen Pixelkanten. PNG ist die einzig vernünftige Variante um mit Transparenz zu arbeiten.

Raptor schrieb:

Bei gif-Grafiken gibt es kein Transparenz-Antialiasing. Daher hast du bei gifs immer solche schönen Pixelkanten. PNG ist die einzig vernünftige Variante um mit Transparenz zu arbeiten.

Hallo Flo,

bekommt man auch bei Gif hin, man muss halt das Bild noch bearbeiten, bei maximaler Größe. Der Lohn ist aber dann die schlankere Datei.
Und PNG ist erst ab IE 7 darstellbar.

hansen

hansen schrieb:

....
bekommt man auch bei Gif hin, man muss halt das Bild noch bearbeiten, bei maximaler Größe. Der Lohn ist aber dann die schlankere Datei.
Und PNG ist erst ab IE 7 darstellbar.
...

Schlankere Datei?? Was für GIFSs hast du denn?
Bei GIFs kommt eine Flächenkompresion zum Einsatz, bei dem PNG mit Text wird es als Vektor gespeichert und das spart sehr viel Platz.

Und wie Raptor schon richtig sagte, diese Art der Transparenz bekommst du mit GIFs unmöglich hin. Das wird deutlich wenn sich die Hintergrund Farbe ändert.


Und wer jetzt noch den IE 6 nutzt ....
Irgendwie muss man die Leute ja dazu bewegen das sie Ihren Browser aktualisieren allein schon aus Sicherheitsgründen.

Ultima schrieb:

Schlankere Datei?? Was für GIFSs hast du denn?
Bei GIFs kommt eine Flächenkompresion zum Einsatz, bei dem PNG mit Text wird es als Vektor gespeichert und das spart sehr viel Platz.
Und wie Raptor schon richtig sagte, diese Art der Transparenz bekommst du mit GIFs unmöglich hin. Das wird deutlich wenn sich die Hintergrund Farbe ändert.

Hallo Thomas,

in Bayern verwenden wir die gleichen GIFs, wie in den restlichen Bundesländern.
Mal abgesehen davon, das die Anforderung von Markus mit CSS auch zu lösen ist, kommt es immer darauf an, was für Vorgaben gegeben sind.
Bei der von Markus z.B. wäre GIF die bessere Lösung.
Vorgabe ist hier - dunkler Hintergrund (in dem Fall schwarz) - dunkle Schriftfarbe - kleine Schrift.
Mit PNG 8 ist das Ergebnis nicht zu gebrauchen.
Der Unterschied bei dieser Konstellation zwischen PNG 24 und GIF ist kaum feststellbar.
Die Datei von GIF - Hintergrund Transparent - Schriftfarbe #900 - Höhe 6px hat eine Größe von 539 Byte und die von PNG 1,54 KB.
Man kann natürlich die PNG 24 auch noch kleiner bekommen, aber dann wird die Qualität schlechter als GIF.
Bei dunklen Farben und kleiner Schrift ist GIF die bessere Wahl, bei hellen Farben und/oder größerer Schrift ist PNG 24 besser.
Und man bekommt die Transparenz bei GIF hin -- Photoshop -> für Web speichern -> Datei Gif wählen -> bei Farbpalette alle Farben löschen bis auf #900 - damit hat die GIF-Datei nur noch eine Farbe und der Hintergrund ist transparent.

hansen

Danke euch für die Hilfe. Ich kann den Code leider nur als HTML angeben und nicht als CSS. Deswegen habe ich joergs code verwendet:

Es kahm dabei leider zu einem fehler. Zweck des Codes war, das sich der schwarze Hintergrund immer der Bildschirmbreite anpasst, und das bild immer an der gleichen stelle bleibt.

Beispiel

Auflösungsbeispiel 1:


Auflösungsbeispiel 2:


Wie macht man das?

Mit freundlichen Grüßen
Markus

Du könntest die Hintergrundfarbe einem