Html-Farbe > Farbe Forum > Wie kann ein HTML-Hintergrundbild eingestellt werden?

Html Hintergrundbild

Ich möchte Text in einer HTML-Datei mit einem Hintergrundbild hinterlegen? Wie geht das? Irgendwo habe ich schon gesehen, daß das Hintergrund beim scrollen stehenbleibt. Wie kann das konfiguriert werden?
Prod.-Info
Kurz vorab: Prinzipiell macht es Sinn, das Aussehen separat in CSS-Dateien zu speichern. In solchen Fällen verweist man in HTML-Elementen auf Style-Klassen, die in der externen HTML-Datei definiert werden. Weiter unten wird ein kleines Beispiel gegeben. Ansonsten kann der Style auch direkt in einem spezifischen HTML-Element deklariert werden.

Zur Darstellung des HTML-Hintergrundbildes bieten die HTML-Konventionen folgende Parameter an, die glücklicherweise in so gut wie allen Browsern gleich funktionieren:

  • background-image:url(URI);
  • background-repeat:Wert;
    ...mit den Werten:
    repeat = wiederholen (Default).
    repeat-x = horizontal wiederholen.
    repeat-y = vertikal wiederholen.
    no-repeat = nicht wiederholen, nur Einzelbild!
  • background-attachment:Wert;
    ...mit folgenden Werten:
    scroll = mitscrollen (Default).
    fixed = nicht-scrollendes Hintergrundbild (Wasserzeicheneffekt).
  • background-position:Wert;
    ... mit jeweils zwei Werten, z.B. 12px 18px.
    ... alternativ mit Schlüsselworten für einen oder beide Werte:
    top = vertikal obenbündig.
    center = horizontal oder vertikal zentriert.
    bottom = vertikal untenbündig.
    left = horizontal linksbündig.
    right = horizontal rechtsbündig.
Wie gesehen, kann mit background-attachment der Wasserzeicheneffekt eingestellt werden.

An dieser Stelle soll ein kleines Beispiel verdeutlichen, wie ein Hintergrundbild direkt in HTML eingebunden werden kann:
<div style="background-image:url(Satin.gif);background-repeat:repeat-y">
...mit einem Test-Text,

um diesen

HTML-Hintergrund anzuzeigen
</div>
Und so sieht das dann im Ergebnis aus:
...mit einem Test-Text,

um diesen

HTML-Hintergrund anzuzeigen
Mit CSS würden zwei Dateien benötigt werden - hier die beispiel.css:
div.fortest {background-image:url(Satin.gif);background-repeat:repeat-y}...und hier die beispiel html-Datei (die Dekaration der CSS-Date würde auch bei mehreren Stylesheet-Klassen nur einmal erfolgen):
<LINK href='beispiel.css' type='text/css' rel='stylesheet'>
<div class="fortest">
...mit einem Test-Text,

um diesen

HTML-Hintergrund anzuzeigen
</div>

Autor:
EMail:
Homepage-URL:
*
Text *:
Standard TAGSpot H1 H2 H3 EM STRONG A IMGIMG OL UL LI Q CITE ABBR ACRONYM CODE SAMP VAR DFN
Tabellen TAGSpot TABLE TABLE TR TH TH TD TD TD TD TD TD TD TD TD TD TD
Vorschau