Stil mit {stil}

Jan 2009

Color und Background • CSS-Eigenschaft background-image für die Gestaltung des Hintergrunds

Ein einzelnes Bild kann als Hintergrundbild für ein HTML-Element festgelegt werden. Das Hintergrundbild ist nicht skalierbar – es kann nur in der Originalgröße des Bildes angezeigt werden.

Die URL der Bilddatei – der Speicherort – wird hinter die Bezeichnung »url« in runde Klammern gesetzt und absolut oder relativ zum Speicherort der CSS-Datei angegeben (nicht relativ zur HTML-Datei). Die Pfadangabe kann in Hochkommas gesetzt werden – erforderlich sind die Hochkommas nicht.

body { background: thistle; }
div.box { background: wheat url(pear.gif); padding: 50px; }

h3 { color: #405980; background: white; background: rgba(255,255,255,0.7);  }
p { background: white; background: rgba(255,255,255,0.7); }

Für die Anzeige von Hintergrundbildern stellt CSS vier Optionen zur Verfügung:

• Das Hintergrundbild kann ohne Beschränkung wiederholt werden,
• nur in eine Richtung wiederholt (repeat-x oder repeat-y)
• oder nur an einer einzigen Position angezeigt werden (no-repeat) werden
• oder nur an einem festen Platz im Browserfenster angezeigt werden.

Hintergrundbilder liegen immer über der Hintergrundfarbe. Bei Hintergrundbildern, die teilweise transparent sind, sollte also immer auch eine Hintergrundfarbe angegeben werden. Falls das Hintergrundbild nicht geladen werden kann, wird die Hintergrundfarbe dafür sorgen, dass die Texte des Elements auch weiterhin lesbar bleiben.

Wenn für ein HTML-Element die CSS-Eigenschaft padding festgelegt ist, dann belegt das Hintergrundbild auch den Raum, der für padding notiert ist.

IE4+ M1 N4+ O5+ CSS1 Erblich: Nein

background-image

legt ein Bild als Hintergrund fest.

<uri> | none

<uri>

ist der Name eines Bildes mit seinem Pfad.

none

ist der Vorgabewert – per Vorgabe ist kein Hintergrundbild vorgesehen. Die explizite Notation von none sorgt dafür, dass alle vorangegangenen Deklarationen eines Hintergrundbildes ausgeschaltet werden.

zurück zum Seitenanfang