background-size

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%;
}

Bereiche, die nicht von einem Hintergrundbild abgedeckt sind, werden mit der Eigenschaft background-color gefüllt, und die Hintergrundfarbe wird hinter den transparenten/halbtransparenten Hintergrundbildern sichtbar sein.

/* 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 Weisen angegeben:

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

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

contain

Skaliert das Bild so groß wie möglich innerhalb seines Containers, ohne das Bild zu beschneiden oder zu strecken. Wenn der Container größer als das Bild ist, führt dies zu einer Kachelbildung des Bildes, es sei denn, die Eigenschaft background-repeat ist auf no-repeat eingestellt.

cover

Skaliert das Bild (unter Beibehaltung seines Verhältnisses) auf die kleinste mögliche Größe, um den Container vollständig auszufüllen (d.h.: sowohl Höhe als auch Breite decken den Container komplett ab), sodass kein leerer Raum 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>

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

<percentage>

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

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 Vektorbilder (wie SVG) haben nicht unbedingt intrinsische Dimensionen. 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 intrinsischen Proportionen.
• Hintergrundbilder, die mit der element()-Funktion erstellt wurden, verwenden die intrinsischen Dimensionen und Proportionen des erzeugenden Elements.

Basierend auf den intrinsischen Dimensionen und Proportionen wird die darstellbare Größe des Hintergrundbildes wie folgt berechnet:

• Wenn beide Komponenten von background-size angegeben und nicht auto sind: Das Hintergrundbild wird in der angegebenen Größe dargestellt.

• Wenn die background-size contain oder cover ist: Unter Beibehaltung ihrer intrinsischen Proportionen wird das Bild in maximaler Größe innerhalb oder als Abdeckung des Hintergrundpositionierungsbereichs dargestellt. Wenn das Bild keine intrinsischen Proportionen hat, wird es in der Größe des Hintergrundpositionierungsbereichs dargestellt.

• Wenn die background-size auto oder auto auto ist:

  • Wenn das Bild sowohl horizontale als auch vertikale intrinsische Dimensionen hat, wird es in dieser Größe dargestellt.
  • Wenn das Bild keine intrinsischen Dimensionen und keine intrinsischen Proportionen hat, wird es in der Größe des Hintergrundpositionierungsbereichs dargestellt.
  • Wenn das Bild keine intrinsischen Dimensionen hat, aber intrinsische Proportionen, wird es so dargestellt, als ob contain angegeben wurde.
  • Wenn das Bild nur eine intrinsische Dimension und intrinsische Proportionen hat, wird es in der Größe dargestellt, die der 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 mit der angegebenen Dimension dargestellt, und die andere Dimension des Hintergrundpositionierungsbereichs wird verwendet.

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

• Wenn die 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 berechnet, falls vorhanden. Wenn keine solche intrinsische Dimension vorhanden ist, wird die entsprechende Dimension des Hintergrundpositionierungsbereichs verwendet.

background-size = 
  <bg-size>#  

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

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

Betrachten wir ein großes Bild, ein 2982x2808 Firefox-Logo. Wir möchten vier Kopien dieses Bildes in ein 300x300-Pixel großes 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 Hintergrundbilder in der Größe anpassen für weitere Beispiele.

• Hintergrundbilder in der Größe anpassen
• Skalierung von SVG-Hintergründen
• object-fit