background-image

Übersicht

Die background-image Eigenschaft legt ein Hintergrundbild fest. Hintergrundbilder werden immer über Hintergrundfarben gelegt. Es ist daher sinnvoll immer eine Hintergrundfarbe mittels background-color anzugeben, um bei ausgeschalteten Grafiken oder Fehlern beim Laden des Bildes einen ausreichenden Kontrast zu gewährleisten. Die Kurzform background bietet sich daher an, um beides zu notieren.

• 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

Spezifikation

• CSS 3 Background and Borders #background-image
• CSS 2.1 Colors and Backgrounds #background-image
• CSS 3 Images #gradients (Editor's Draft)

Siehe auch

• background, background-attachment, background-clip, background-color, background-origin, background-position, background-repeat, background-size
• -moz-background-inline-policy
• -moz-linear-gradient, -moz-radial-gradient, -moz-repeating-linear-gradient, -moz-repeating-radial-gradient