CSS-Eigenschaft background-size

Die CSS-Eigenschaft background-size efiniert die Größe des Hintergrundbildes. Diese Eigenschaft hat fünf Werte: auto, length, percentages, cover, contain.

Auto setzt das Hintergrundbild in seiner Originalgröße. Dies ist der Standardwert. Length gibt die Höhe und die Breite von background image an. Negative Werte sind ungültig. Percentage setzt die Höhe und die Breite von background-image durch Prozentwerte. Auch hier sind die negativen Werte ungültig.

Cover skaliert das Bild so groß wie möglich, ohne das Bild zu dehnen. Wenn die Proportionen des Bildes vom Element abweichen, wird es entweder vertikal oder horizontal beschnitten, so dass kein Leerraum mehr übrig bleibt.

Contain ändert die Größe des Hintergrundbildes, so dass das Bild vollständig sichtbar ist.

Anfangswert auto
Gilt für Alle Elemente. Es gilt auch für ::first-letter und ::first-line.
Geerbt Nein
Animierbar Ja, die Größe des Hintergrundbildes ist animierbar.
Version CSS3
DOM Syntax object.style.backgroundSize = "50% 100%";

Syntax

background-size: auto | length | cover | contain | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
      background-size: 300px 200px;
      background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für background size.</h2>
    <p>Hier kann beliebige Information platziert werden.</p>
  </body>
</html>

Im angegebenen Beispiel wird der Wert length verwendet. Es stellt die Breite und Höhe des Hintergrundbildes ein. Der erste Wert bestimmt die Breite, der zweite Wert die Höhe. Wenn ein Wert angegeben wird, wird der zweite auf "auto" gesetzt.

Sehen Sie ein weiteres Beispiel, wo die Breite und Höhe des Hintergrundbildes durch Prozentwerte definiert sind.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
      background-size: 40% 100%;
      background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für background size.</h2>
    <p>Hier kann beliebige Information platziert werden.</p>
  </body>
</html>

Sehen wir uns ein Beispiel mit dem Wert cover an. Es macht das Bild so groß wie möglich, ohne das Bild zu dehnen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
      background-size: cover;
      background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für background size.</h2>
    <p>Hier kann beliebige Information platziert werden.</p>
  </body>
</html>

Werte

Wert Beschreibung
auto Das ist der Standardwert. Es setzt das Hintergrundbild in seiner Originalgröße.
length Es setzt die Breite und Höhe des Hintergrundbildes. Der erste Wert setzt die Breite und der zweite die Höhe, wenn nur ein Wert angegeben ist, wird der zweite Wert auf auto gesetzt. Es wird durch “px”, “em” definiert.
percentage Es setzt die Breite und Höhe in Prozent. Der erste Wert setzt die Breite und der zweite die Höhe, wenn nur ein Wert angegeben ist, wird der zweite Wert auf auto gesetzt.
cover Es skaliert das Hintergrundbild so groß wie möglich, um den gesamten Hintergrundbereich abzudecken.
contain Es skaliert das Hintergrundbild auf die größte Größe, so dass seine Breite und Höhe innerhalb des Inhaltsbereichs ausgefüllt werden kann.
initial Es setzt die Eigenschaft auf den Standardwert.
inherit Es erzeugt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
15.0+ 4.0+
3.6 -moz-
7.0+ 11.5+
10.1 -o-

Übe dein Wissen

Welche Werte kann die Eigenschaft 'background-size' in CSS annehmen?
Finden Sie das nützlich?