MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

background-image

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Übersicht

Die background-image-Eigenschaft legt ein oder mehrere Hintergrundbilder für ein Element fest. Die einzelnen Bilder werden übereinander gestapelt, wobei die erste Schicht so dargestellt wird, dass sie dem Benutzer am nächsten erscheint. Hintergrundbilder werden immer über Hintergrundfarben gelegt.

Um bei ausgeschalteten Grafiken oder Fehlern beim Laden des Bildes einen ausreichenden Kontrast zu gewährleisten, ist es deshalb sinnvoll, immer eine Hintergrundfarbe mittels background-color anzugeben. Die Kurzform background bietet sich an, um beides zu notieren.

Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundbilder, durch Kommata getrennt, definiert werden.
Das zuerst definierte Hintergrundbild ist dabei das Oberste.
  • Standardwert: none
  • Anwendbar auf: Alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: absolute URI oder none

Syntax

background-image:  <Hintergrundbild>[, <Hintergrundbild>]*

<Hintergrundbild>:
none | url | inherit | -moz-linear-gradient() | -moz-radial-gradient()

Werte

none
Standardwert. Es wird kein Hintergrundbild verwendet.
url
Der Pfad des Bildes, das als Hintergrund angezeigt werden soll.
inherit
Der Wert des Elternelements wird geerbt.

Mozilla Erweiterungen:

-moz-linear-gradient()
Linearer Verlauf
-moz-radial-gradient()
Radialer Verlauf

Beispiele

Note that the star image is partially transparent and is layered over the cat image.

HTML

<div>
    <p class="catsandstars">
        This paragraph is full of cats<br />and stars.
    </p>
    <p>This paragraph is not.</p>
    <p class="catsandstars">
        Here are more cats for you.<br />Look at them!
    </p>
    <p>And no more.</p>
</div>

CSS

pre, p {
    font-size: 1.5em;
    color: #FE7F88;
    background-color: transparent;
}

div {
  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}

p {
  background-image: none;
}

.catsandstars {
  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), 
                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
}

Result

Browser Kompatibilität

Browser ab Version mehrere Hintergrundbilder Verläufe
Internet Explorer 4.0 --- ---
Firefox (Gecko) 1.0 (1.0) 3.6 (1.9.2) 3.6 (1.9.2) [-moz-]
Opera 3.5 10.5 ---
Safari (WebKit) 1.0 (85) 1.3 (312) 4.0 (528) [-webkit-]

Spezifikation

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: splendid_twd, SphinxKnight, fscholz, SJW, Michael2402
 Zuletzt aktualisiert von: splendid_twd,