Mit CSS lassen sich Hintergrundbilder auf verschiedene Art und Weise einbinden.

Mit der Eigenschaft background-image lassen sich diversen Elementen Hintergrundbilder zuweisen.Hierzu verwendet man das Schlüsselwort url und gibt in Klammern danach den Pfad zur Datei an.

Wohlgemerkt den Pfad von der CSS-Datei aus gesehen zur Bilddatei. In diesem Fall liegt die CSS-Datei in dem Haupt-Verzeichnis über dem Verzeichnis images (darin befinden sich die Bilddateien), also muss der Pfad auf das Bildverzeichnis images verweisen.

#header { background-image: url (images/header.gif); }

Hier ein Beispiel für ein Hintergrundbild im Kopfbereich – einmal ausführlich – einmal in Kurzschreibweise mit weiteren Einstellmöglichenkeiten, die unten stehend erläutert werden:

 

 

Wiederholung des Hintergrundbildes

Mit background-repeat kann man die Art der Wiederholung der Anzeige des Hintergrundbildes bestimmen:

background-repeat: repeat-x; das Bild wird horizontal wiederholt
background-repeat: repeat-y; das Bild wird vertikal wiederholt
background-repeat: no-repeat;
das Bild wird nur einmalig angezeigt und nicht wiederholt

Standardmäßig, d.h. ohne Angabe eines Wertes von background-repeat wird das Bild gekachelt, also horizontal und vertikal wiederholt.

Position des Hintergrundbildes

Die Angabe, wo das Bild platziert sein soll bzw. an welcher Stelle mit der Wiederholung des Bildes angefangen werden soll, erfolgt über background-position.

Für die vertikale Positionierung verwendet man top, center oder bottom, für die horizontale Positionierung left, center, right. Statt der Bezeichnungenn kann man auch Prozentwerte einsetzen, so z.B. ergibt die 0% eine Positionierung oben oder auch links, mit 50 % 50% würde man ein Bild mittig platzieren.

Hintergrundbild als Wasserzeichen

Ein schicker Effekt stellt sich ein, wenn man ein Hintergrundbild fest platziert und sich die Inhalte im Vordergrund nach unten scrollen lassen.

Das wurde auf dieser Website auch so gemacht. Hier das Beispiel einmal ausführlich und einmal in Kurzschreibweise, die Erläuterungen dazu findet man weiter unten:

Diesen Effekt erreicht man mit der Eigenschaft background-attachment: fixed und der Angabe z.B. background-position: top left , mit der man angibt, an welcher Stelle es platziert werden soll.

Es gibt noch einige andere Varianten, die in einem nächsten Beitrag vorgestellt werden.

2016-10-14T08:10:43+00:00Januar 11th, 2011|CSS|Kommentare deaktiviert für CSS Hintergrund -bilder einbinden

Cookie-Einstellung

Bitte treffen Sie eine Auswahl. Weitere Informationen zu den Auswirkungen Ihrer Auswahl finden Sie unter Hilfe. Datenschutz | Impressum

Treffen Sie eine Auswahl um fortzufahren

Ihre Auswahl wurde gespeichert!

Weitere Informationen

Hilfe

Um fortfahren zu können, müssen Sie eine Cookie-Auswahl treffen. Nachfolgend erhalten Sie eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Alle Cookies zulassen:
    Jedes Cookie wie z.B. Tracking- und Analytische-Cookies.
  • Nur First-Party-Cookies zulassen:
    Nur Cookies von dieser Webseite.
  • Keine Cookies zulassen:
    Es werden keine Cookies gesetzt, es sei denn, es handelt sich um technisch notwendige Cookies. Borlabs Cookie hat bereits ein notwendiges Cookie gesetzt.

Sie können Ihre Cookie-Einstellung jederzeit hier ändern: Datenschutz. Impressum

Zurück