HTML Hintergrundbild fixieren und ausrichten mit CSS

Ein Hintergrundbild soll beim Scrollen an einer festgelegten Postion bleiben? Das lässt sich ganz einfach per CSS erreichen und nach Wunsch varieren.

So einfach geht’s:

1. Den <body> -Tag mit dem unten genannten CSS-Code ergänzen
2. Die gewünschte Hintergrundfarbe angeben
("#ffffff" durch Ihren Farbcode ersetzen)
3. Den Zielpfad zu Ihrem Hintergrundbild festlegen
("../images/hintergrundbild.gif" durch Ihren Zielpfad ersetzen – z.B.: "hg.jpg")

Beispiele:

Hintergrundbild links und oben fixieren:

<body style="background: #ffffff url(../images/hintergrundbild.gif) no-repeat fixed left top;">

Hintergrundbild rechts und unten fixieren:

<body style="background: #ffffff url(../images/hintergrundbild.gif) no-repeat fixed right bottom;">

Hintergrundbild in der Seitenmitte fixiert:

<body style="background: #ffffff url(../images/hintergrundbild.gif) no-repeat fixed center center;">>

Die Befehle:

repeat – Hintergrundbild wiederholen
no-repeat – Hintergrundbild nur einmal anzeigen
fixed – Hintergrundbild fixieren
left – links ausrichten
right – rechts ausrichten
top – oben ausrichten
bottom – unten ausrichten
center – Hintergrundbild zentrieren

Ein Tipp von: Jörn Fester, bearbeitet und aktualisiert von: Designer in Action

Kommentieren

Ich akzeptiere die Datenschutzerklärung.