CSS/Eigenschaften/Hintergrundfarben und -bilder/background-image

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft background-image legen Sie den Pfad zu den Hintergrundbildern für ein Element fest. Beachten Sie, dass multiple Hintergrundgrafiken nicht von allen Versionen der Browser unterstützt werden.

  • CSS 2.1
  • IE
  • Firefox
  • Safari
  • Opera
  • Chrome
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>CSS-Beispiel: background-image</title>
    <style>
      #demo {
        background-image:
          url(...),
          url(...);
        height: 20em;
        outline: 1px solid;
        width: 30em;
      }
    </style>
  </head>
  <body>
    <h1>Pfad zum Hintergrundbild</h1>
    <section id="demo"></section>
  </body>
</html>
In diesem Beispiel werden zwei Hintergrundgrafiken übereinander gelegt. Da Angaben zu den weiteren Eigenschaften der Hintergründe fehlen, verwenden die Browser ihre default-Einstellungen.

background-image erwartet die Pfade zu den Hintergrundgrafiken in der Schreibweise url(Pfadangabe), url(Pfadangabe). Die Pfadangabe kann dabei relativ oder absolut erfolgen (siehe HTML/Referenzieren_in_HTML).

Beachten Sie: Relative Angaben beziehen sich ggf. auf die CSS-Ressource, nicht auf das HTML-Dokument.
Empfehlung: Geben Sie neben dem Hintergundbild auch immer eine passende Hintergrundfarbe an. Wenn das Bild nicht angezeigt wird, z.B. weil Benutzer eine kontrastreiche Ansicht in ihrem Browser eingestellt haben, ist so der Text trotzdem noch sichtbar.
Beispiel
p {
  background-color: black;
  background-image: url(...);
  color: white;
}

Erlaubt ist zudem der Wert none, welcher ebenfalls eine Hintergrundebene erzeugt. Dies ist ggf. bei der Festlegung weiterer Eigenschaften multipler Hintergründe zu beachten.

Mit CSS3 gibt es auch die Möglichkeit, Farbverläufe als Hintergründe zu erstellen. Die entsprechenden Funktionen sind

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Hilfe
SELFHTML
Diverses
Werkzeuge
Flattr
Soziale Netzwerke