background-size

Probieren Sie es aus

background-size: contain;

background-size: contain;
background-repeat: no-repeat;

background-size: cover;

background-size: 30%;

background-size: 200px 100px;

<section id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  background-image: url("/shared-assets/images/examples/hand.jpg");
  min-width: 100%;
  min-height: 100%;
}

Syntax

/* Keyword values */
background-size: cover;
background-size: contain;

/* One-value syntax */
/* the width of the image (height becomes 'auto') */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/* Two-value syntax */
/* first value: width of the image, second value: height */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* Multiple backgrounds */
background-size: auto, auto; /* Not to be confused with `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/* Global values */
background-size: inherit;
background-size: initial;
background-size: revert;
background-size: revert-layer;
background-size: unset;

Die background-size Eigenschaft wird auf eine der folgenden Arten angegeben:

• Verwenden der Schlüsselwortwerte contain oder cover.
• Verwenden eines Wert für die Breite, wobei die Höhe standardmäßig auf auto gesetzt ist.
• Verwenden sowohl eines Breiten- als auch eines Höhenwertes, wobei der erste die Breite und der zweite die Höhe festlegt. Jeder Wert kann eine <length>, ein <percentage> oder auto sein.

Um die Größe mehrerer Hintergrundbilder festzulegen, trennen Sie den Wert für jedes mit einem Komma.

Werte

contain

Skaliert das Bild so groß wie möglich innerhalb seines Containers, ohne das Bild zuzuschneiden oder zu strecken. Wenn der Container größer als das Bild ist, wird dies zu einer Kachelung des Bildes führen, außer die background-repeat Eigenschaft ist auf no-repeat eingestellt.

cover

Skaliert das Bild (unter Beibehaltung seines Verhältnisses) auf die kleinste mögliche Größe, um den Container zu füllen (d.h. sowohl seine Höhe als auch Breite decken den Container vollständig ab), sodass kein Leerraum bleibt. Wenn die Proportionen des Hintergrunds von denen des Elements abweichen, wird das Bild entweder vertikal oder horizontal beschnitten.

auto

Skaliert das Hintergrundbild in die entsprechende Richtung, sodass seine intrinsischen Proportionen beibehalten werden.

<length>

Dehnt das Bild in der entsprechenden Dimension auf die angegebene Länge aus. Negative Werte sind nicht erlaubt.

<percentage>

Dehnt das Bild in der entsprechenden Dimension auf den angegebenen Prozentsatz des Hintergrundpositionierungsbereichs aus. Der Hintergrundpositionierungsbereich wird durch den Wert von background-origin bestimmt (standardmäßig der innerer Abstand). Wenn jedoch der background-attachment Wert des Hintergrunds fixed ist, ist der Positionierungsbereich stattdessen der gesamte viewport. Negative Werte sind nicht erlaubt.

Intrinsische Dimensionen und Proportionen

Die Berechnung der Werte hängt von den intrinsischen Dimensionen (Breite und Höhe) und den intrinsischen Proportionen (Breite-zu-Höhe-Verhältnis) des Bildes ab. Diese Attribute sind wie folgt:

• Ein Bitmap-Bild (wie JPG) hat immer intrinsische Dimensionen und Proportionen.
• Ein Vektorbild (wie SVG) muss nicht unbedingt intrinsische Dimensionen haben. Wenn es sowohl horizontale als auch vertikale intrinsische Dimensionen hat, hat es auch intrinsische Proportionen. Wenn es keine Dimensionen oder nur eine Dimension hat, kann es Proportionen haben oder nicht.
• CSS <gradient>s haben keine intrinsischen Dimensionen oder Proportionen.
• Hintergrundbilder, die mit der element() Funktion erstellt werden, verwenden die intrinsischen Dimensionen und Proportionen des erzeugenden Elements.

Ausgehend von den intrinsischen Dimensionen und Proportionen wird die gerenderte Größe des Hintergrundbildes wie folgt berechnet:

• Wenn beide Komponenten von background-size angegeben sind und nicht auto: Wird das Hintergrundbild in der angegebenen Größe gerendert.

• Wenn background-size contain oder cover: Unter Beibehaltung seiner intrinsischen Proportionen wird das Bild in der größten im Hintergrundpositionierungsbereich enthaltenen Größe oder diesen vollständig abdeckenden Größe gerendert. Wenn das Bild keine intrinsischen Proportionen hat, wird es in der Größe des Hintergrundpositionierungsbereichs gerendert.

• Wenn background-size auto oder auto auto:

  • Wenn das Bild sowohl horizontale als auch vertikale intrinsische Dimensionen hat, wird es in dieser Größe gerendert.
  • Wenn das Bild keine intrinsischen Dimensionen und keine intrinsischen Proportionen hat, wird es in der Größe des Hintergrundpositionierungsbereichs gerendert.
  • Wenn das Bild keine intrinsischen Dimensionen, aber intrinsische Proportionen hat, wird es gerendert, als ob contain angegeben worden wäre.
  • Wenn das Bild nur eine intrinsische Dimension und intrinsische Proportionen hat, wird es in der Größe gerendert, die dieser einen Dimension entspricht. Die andere Dimension wird unter Verwendung der angegebenen Dimension und der intrinsischen Proportionen berechnet.
  • Wenn das Bild nur eine intrinsische Dimension, aber keine intrinsischen Proportionen hat, wird es unter Verwendung der angegebenen Dimension und der anderen Dimension des Hintergrundpositionierungsbereichs gerendert.

  Hinweis: SVG-Bilder haben ein preserveAspectRatio Attribut, das standardmäßig dem Äquivalent von contain entspricht; ein explizites background-size führt dazu, dass preserveAspectRatio ignoriert wird.

• Wenn background-size eine auto Komponente und eine nicht auto Komponente hat:

  • Wenn das Bild intrinsische Proportionen hat, wird es auf die angegebene Dimension gestreckt. Die nicht spezifizierte Dimension wird unter Verwendung der angegebenen Dimension und der intrinsischen Proportionen berechnet.
  • Wenn das Bild keine intrinsischen Proportionen hat, wird es auf die angegebene Dimension gestreckt. Die nicht spezifizierte Dimension wird unter Verwendung der entsprechenden intrinsischen Dimension des Bildes, falls vorhanden, berechnet. Wenn es keine solche intrinsische Dimension gibt, wird es die entsprechende Dimension des Hintergrundpositionierungsbereichs.

Formale Definition

Formale Syntax

background-size = 
  <bg-size>#  

<bg-size> = 
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain                                    

<length-percentage> = 
  <length>      |
  <percentage>  

Beispiele

Kacheln eines großen Bildes

Betrachten wir ein großes Bild, ein 2982x2808 Firefox-Logo-Bild. Wir wollen vier Kopien dieses Bildes in ein 300x300-Pixel-Element kacheln. Dazu können wir einen festen background-size Wert von 150 Pixeln verwenden.

HTML

<div class="tiledBackground"></div>

CSS

.tiledBackground {
  background-image: url("https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png");
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

Ergebnis

Siehe Resizing background images für weitere Beispiele.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Resizing background images
• Scaling SVG backgrounds
• object-fit