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

Bereiche, die nicht durch ein Hintergrundbild abgedeckt sind, werden mit der background-color-Eigenschaft gefüllt, und die Hintergrundfarbe wird hinter Hintergrundbildern, die Transparenz/Transluzenz haben, sichtbar sein.

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 spezifiziert:

• Verwendung der Schlüsselwortwerte contain oder cover.
• Verwendung eines nur Breitenwerts, wobei die Höhe standardmäßig auto ist.
• Verwendung sowohl eines Breiten- als auch eines Höhenwerts, 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 die Werte für jedes einzelne mit einem Komma.

Werte

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 Bildkachelung, es sei denn, die background-repeat-Eigenschaft ist auf no-repeat gesetzt.

cover

Skaliert das Bild (unter Beibehaltung seines Verhältnisses) auf die kleinste mögliche Größe, um den Container auszufüllen (d.h.: sowohl Höhe als auch Breite decken den Container vollständig ab), ohne leeren Raum zu lassen. Wenn die Proportionen des Hintergrunds von dem Element abweichen, wird das Bild entweder vertikal oder horizontal beschnitten.

auto

Skaliert das Hintergrundbild in die entsprechende Richtung, sodass seine intrinsischen Proportionen erhalten bleiben.

<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 Padding-Box). Wenn jedoch der Wert von background-attachment des Hintergrunds fixed ist, ist der Positionierungsbereich stattdessen das gesamte Ansichtsfenster. Negative Werte sind nicht erlaubt.

Intrinsische Dimensionen und Proportionen

Die Berechnung von Werten hängt von den intrinsischen Dimensionen (Breite und Höhe) und den intrinsischen Proportionen (Breiten-Höhen-Verhältnis) des Bildes ab. Diese Eigenschaften sind wie folgt:

• Ein Bitmap-Bild (wie JPG) hat immer intrinsische Dimensionen und Proportionen.
• Ein Vektorgrafik-Bild (wie SVG) hat nicht unbedingt intrinsische Dimensionen. Wenn es sowohl horizontale als auch vertikale intrinsische Dimensionen hat, hat es auch intrinsische Proportionen. Wenn es keine 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 wurden, verwenden die intrinsischen Dimensionen und Proportionen des generierenden Elements.

Basierend auf 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 sind: Das Hintergrundbild wird in der angegebenen Größe gerendert.
• Wenn die background-size contain oder cover ist: Unter Beibehaltung seiner intrinsischen Proportionen wird das Bild so groß wie möglich innerhalb oder vollständig abdeckend gerendert, ohne den Hintergrundpositionierungsbereich zu verlassen. Wenn das Bild keine intrinsischen Proportionen hat, wird es in der Größe des Hintergrundpositionierungsbereichs gerendert.
• 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 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 so gerendert, als wäre contain angegeben.
  • Wenn das Bild nur eine intrinsische Dimension und intrinsische Proportionen hat, wird es in der Größe gerendert, die dieser Dimension entspricht. Die andere Dimension wird mit der angegebenen Dimension und den intrinsischen Proportionen berechnet.
  • Wenn das Bild nur eine intrinsische Dimension hat, aber keine intrinsischen Proportionen, wird es mit der angegebenen Dimension gerendert und die andere Dimension des Hintergrundpositionierungsbereichs verwendet.

• 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 angegebene 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 angegebene Dimension wird unter Verwendung der entsprechenden intrinsischen Dimension des Bildes berechnet, falls vorhanden. Wenn es keine solche intrinsische Dimension gibt, wird sie zu der entsprechenden 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. Wir möchten vier Kopien dieses Bildes in einem 300x300-Pixel-Element kacheln. Um dies zu erreichen, 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

Weitere Beispiele finden Sie unter Resizing background images.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verkleinerung von Hintergrundbildern
• Skalierung von SVG-Hintergründen
• object-fit