CSS-Eigenschaft background-image

Die CSS-Eigenschaft background-image definiert die Hintergrundbilder für Elemente. Es können ein oder mehrere Bilder verwendet werden.

Voreingestellt wird die Eigenschaft background-image an der linken oberen Ecke eines Elements platziert und sowohl vertikal als auch horizontal wiederholt.

Der Hintergrund eines Elements ist die Gesamtgröße des Elements, so dass es folgende Elemente beinhaltet: padding und border aber nicht margin.

Wenn das von Ihnen eingestellte Bild nicht verfügbar ist, müssen Sie auch background-color definieren.

Anfangswert none
Gilt für Alle Elemente. Es gilt auch für ::first-letter und ::first-line.
Geerbt Nein
Animierbar Nein
Version CSS1 + some new values in CSS3
DOM Syntax object.style.backgroundImage = "url(img_tree.png)";

Syntax

background-image: url | none | linear-gradient | radial-gradient | repeat-linear-gradient | repeat-radial-gradient | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body  {
      background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft ackground-image</h2>
    <p>Hello World!</p>
  </body>
</html>

Sehen Sie sich ein weiteres Beispiel an, bei dem zwei Bilder verwendet werden und sie mithilfe der Eigenschaft background-position angegeben werden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body { 
      padding: 100px;
      background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
      background-attachment: fixed;
      background-position: 5px 50px; 
      background-repeat: no-repeat, repeat;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft background-image.</h2>
    <p>Das Hintergrundbild wird 5px von links und 50px von oben positioniert.</p>
  </body>
</html>

In diesem Beispiel ist "linear-gradient" mit zwei Farben als Hintergrundbild für das Element <div> angegeben:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      height: 300px;
      background-image: linear-gradient(#eee, #1c87c9 );
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für Linearer Gradient als Hintergrundbild</h2>
    <p>Diese lineare Steigung beginnt oben. Es beginnt grau und geht in blau über:</p>
    <div></div>
  </body>
</html>

Hier ist ein Beispiel mit dem Wert "repeating-radial-gradient" mit drei Farben.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      height: 300px;
      background-color: #cccccc;
      background-image: repeating-radial-gradient(#8ebf42, #eee 15%, #ccc 30%);
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für Radial gradient als ein Hintergrundbild</h2>
    <div></div>
  </body>
</html>

Werte

Wert Beschreibung
url Definiert die URL des Bildes. Es kann mehr als ein Bild angegeben werden, das durch Kommas getrennt ist.
none Es wird kein Hintergrundbild angezeigt. Es ist der Standardwert.
linear-gradient Als Hintergrundbild wird ein linearer Gradient angegeben.
radial-gradient Als Hintergrundbild wird ein radialer Gradient angegeben.
repeat-linear-gradient Wiederholt einen linearen Gradienten.
repeat-radial-gradient Wiederholt einen radialen Gradienten.
initial Es setzt die Eigenschaft auf den Standardwert.
inherit Es erzeugt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

15.0+ 4.0+
3.6 -moz-
7.0+ 11.5+
10.1 -o-


Finden Sie das nützlich?

Ähnliche Artikel