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

Html Hintergrundbild

Thomas - Mo, 13.10.2008, 10:07:18
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?


HTML Farbe - Mo, 13.10.2008, 13:13:23
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 *:

Vorschau