Hintergrund

(Universalattribute)

<p style="background-color: #FF8866"> erzeugt einen Absatz mit der Hintergrundfarbe #FF8866. Mehr über die Farben und Farbcodes kannst du auf meiner Site über Farben und auf meiner Seite über Hintergründe und auf meiner Seite über den Hexadezimalcode erfahren.

<p style="background-color: yellow"> erzeugt einen Absatz mit der Hintergrundfarbe yellow (gelb). Mehr über die Farben und Farbcodes kannst du auf meiner Site über Farben und auf meiner Seite über Hintergründe und auf meiner Seite über den Hexadezimalcode erfahren.

<p style="background-image:url(bg.gif);"> erzeugt einen Absatz, der das Hintergrundbild bg.gif hat. Das Bild wird immer wiederholt, bis der Absatz zu ende ist. Das Bild darf im JPG-Format oder im GIF-Format sein. Es sind auch animierte und/oder transparente GIFs erlaubt. Bei transparenten GIFs sieht man an den transparenten Stellen die Hintergrundfarbe bzw. das Hintergrundbild des übergeortneten Elements. "bg.gif" muß durch die Adresse und Namen des Bildes ersetzt werden. x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x Dieser Teil des Absatzes wurde nur eingefügt, damit der Absatz lang genug wird, dass du den Effekt der Absatzformatierung sehen kannst. x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

<p style="background-image:url(bg.gif); background-repeat:no-repeat;"> erzeugt einen Absatz der das Hintergrundbild bg.gif hat. Das Bild wird nicht wiederholt. Mit background-repeat kannst du das Wiederholverhalten des Hintergrundbildes bestimmen. es sind folgende Angaben erlaubt:
1. repeat: Diese Angabe ist die Voreinstellung. Man kann sie also weglassen. Sie bedeutet, dass der Hintergrund wie oben beschrieben wiederholt wird.
2. repeat-x: Das Hintergrundbild wird nur eine Zeile lang wiederholt. Gemeint ist natürlich eine Zeile Bilder. Das ist unabhängig von den Textzeilen.
3. repeat-y: Das Hintergrundbild wird nur eine Spalte lang wiederholt.
4. no-repeat: Das Hintergrundbild wird nicht wiederholt. Dieser Absatz ist so formatiert.
Achtung! Der Netscape Navigator (NN) 4 interpretiert diese Angabe zwar, hat aber große Schwierigkeiten damit.
Ich habe in diesem Absatz die Quellcodeschnipsel extra nicht weiß hinterlegt, damit man den Hintergrund erkennen kann.

<p style="background-image:url(bg.gif); background-repeat :repeat-x;"> erzeugt einen Absatz der das Hintergrundbild bg.gif hat. Das Bild wird eine Zeile lang wiederholt. Achtung! NN 4 interpretiert diese Angabe zwar, hat aber große Schwierigkeiten damit. x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x Dieser Teil des Absatzes wurde nur eingefügt, damit der Absatz lang genug wird, dass du den Effekt der Absatzformatierung sehen kannst. x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

<p style="background-image:url(bg.gif); background-repeat :repeat-y;"> erzeugt einen Absatz der das Hintergrundbild bg.gif hat. Das Bild wird eine Spalte lang wiederholt. Achtung! Netscape interpretiert diese Angabe zwar, hat aber große Schwierigkeiten damit. x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x Dieser Teil des Absatzes wurde nur eingefügt, damit der Absatz lang genug wird, dass du den Effekt der Absatzformatierung sehen kannst. x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

Hintergrundposition

Die Festlegung der Position des Hintergrundbildes ist vor allem interessant, wenn durch background-repeat :no-repeat festgelegt wurde, dass das Bild nicht wiederholt wird.
<p style="background-image:url(namibia_wappen.gif); background-repeat :no-repeat; background-position:1cm 2cm;"> erzeugt einen Absatz, der das Hintergrundbild namibia_wappen.gif hat. Das Bild wird nicht wiederholt. Mit background-position: wird festlegt, wo die linke obere Ecke des Hintergrundbildes ist. Nach background-position: folgen 2 numerische Werte oder eine der folgenden Angaben oder sinnvolle Kombinationen daraus. Zulässige Angaben sind
top, wenn das Bild oben ausgerichtet sein soll,
center, wenn das Bild horizontal mittig ausgerichtet sein soll,
middle, wenn das Bild vertikal mittig ausgerichtet sein soll,
bottom, wenn das Bild unten ausgerichtet sein soll,
left, wenn das Bild links ausgerichtet sein soll,
right, wenn das Bild rechts ausgerichtet sein soll.
Achtung! NN 4 stellt zwar das Bild dar, ignoriert aber die Angabe zur Positionierung!
Zulässige numerische Werte können in allen erlaubten Einheiten gemacht werden. Die erste Zahl gibt immer den Abstand von links, und die zweite Zahl den Abstand von oben an.

Wasserzeichen-Effekt

Wenn das Element, das den Hintergrund enthält, länger als der Bildschirm ist, wandert das Hintergrundbild beim scrollen mit. Du kannst mit background-attachment:fixed; dafür sorgen, dass das Bild stehen bleibt. Das funktioniert aber nur im IE und auch dort nur im <body>tag und nicht in Textabsätzen. Deshalb gehe ich hier auch nicht weiter darauf ein. Wenn du dich jetzt informieren willst, wie der Effekt im <body>tag wirkt, kannst du das hier tun.

Weiter geht's auf der Seite "Rahmen und Abstände".


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: