Hintergrundbild ausrichten und fixieren 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

Autor: Jörn Fester

Kommentieren

Ich erteile hiermit dem Betreiber von Designer in Action meine Einwilligung zur Nutzung und Verarbeitung der von mir angegebenen personenbezogenen Daten zum Zweck der Bearbeitung meiner Anfrage. Mir ist bekannt, dass ich jederzeit das Recht habe, der Verarbeitung meiner Daten mit Wirkung für die Zukunft zu widersprechen. Weitere Informationen zur Verarbeitung von personenbezogenen Daten: https://www.designerinaction.de/kontakt/impressum/#datenschutz