Hintergrundbild

Website selber erstellen - Tools, Widgets, Zubehör

ein Projekt von selber-machen-homepage.de

Hintergrundbild einbinden

 

Eine gestalterische Variante ist auf jeden Fall die Verwendung eines Hintergundbildes für die Website. Aber auch die meisten anderen Elemente wie Text oder Tabellen können ein Hintergrundbild erhalten.

HTML bietet hier jedoch beschränkte Möglichkeiten.

Man kann folgende Einstellungen vornehmen.

 

  • background-color (Hintergrundfarbe)
  • background-image (Hintergrundbild)
  • background-repeat (Wiederholungs-Effekt)
  • background-attachment (Wasserzeichen-Effekt)
  • background-position (Hintergrundposition)

 

Beispiele: (wären im jeweiligen Tag einzutragen)

 

style="background-color:#444"

style="background-image:url(Bild.jpg);" background-repeat:no-repeat; background-position:center center;

background-attachment:scroll;"

 

Möglichkeiten für repeat:

 

repeat = wiederholen in x und y Richtung(Voreinstellung).

repeat-x = "eine Zeile lang" wiederholen.

repeat-y = "eine Spalte lang" wiederholen.

no-repeat = nicht wiederholen, als Einzelbild anzeigen.

 

Möglichkeiten für position:

 

allgemeine Notation: background-position:horizontale Position vertikale Position

 

für vertikale/horizontale Psoition sind die üblichen Angaben möglich wie:top, bottom, center, left, right aber auch fest pixel-Werte oder Prozentangaben.

 

Möglichkeiten für attachment:

 

scroll - das Bild scrollt im Hintergund mit

fixed - das Bild bleibt stehen und der Inhalt läuft weiter (wie hier bei dieser website)

 

So schön wie sich eine solche Grafik macht, so gibt es doch ein Problem. Alle Besucher sind mit verschiedenen Auflösungen unterwegs und alle diese Varianten zu berücksichtigen ist kaum möglich. Man müsste also eine maximal grosse Grafik einsetzen, in der Hoffnung, dass die Browser die Grafik gegebenenfalls verkleinern und anpassen.

Natürlich ist es auch eine Frage, ob wie bei dieser Website eine dezente und relativ formlose Grafik genutzt wird oder ein richtiges Bild eines konkreten Objektes.

 

Um all den möglichen Varianten gerecht zu werden, empfhielt sich ein kleiner Trick. Die Hintergundgrafik wird nicht im body-Tag zugewiesen, sondern in einem kleinen <p>-Tag der gleich zu Beginn des Body eingefügt wird. (soweit möglich)

 

<p><img src="Bild-URL" style="width:100%;position:absolute;z-index:-1;top:0;opacity:0.5"></p>

 

Mit width:100% wird das Bild, egal welche Auflösung, immer die ganze Breite und entsprechende Höhe einnehmen. Position:absolute und z-index:-1 müssen beide notiert sein. Damit wird der <p>-Tag durch z-index:-1 unter alle anderen Elemente platziert und bildet den Hintergrund der Website. top:0 richtet den <p>-Tag am oberen Bildschirmrand aus. Opacity:0.5 ist eine Möglichkeit das Bld einfach transparent erscheinen zu lassen und spart viel Arbeit mit dem Grafikprogramm.

 

Allerdings würde jetzt das Bild stehenbleiben und man würde beim Scrollen unter das Bild gelangen. Erst wenn man aus dem "position:absolute" ein "position:fixed" macht, bleibt das Bild im Hintergrund stehen und der Text läuft weiter.

 

 

Viel Spaß.

 

Copyright © All Rights Reserved