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

• Verwendung der Schlüsselwerte contain oder cover.
• Angabe nur eines Breitenwerts, in diesem Fall entspricht die Höhe dem Standardwert auto.
• Angabe 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 anzugeben, 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 verzerren. Wenn der Container größer als das Bild ist, führt dies zu einer Bildkachelung, es sei denn, die background-repeat Eigenschaft ist auf no-repeat gesetzt.

cover

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

auto

Skaliert das Hintergrundbild in der entsprechenden Richtung so, dass seine inhärenten Proportionen erhalten bleiben.

<length>

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

<percentage>

Dehnt das Bild in der entsprechenden Dimension auf den angegebenen Prozentsatz der Hintergrundpositionierungsfläche aus. Die Hintergrundpositionierungsfläche wird durch den Wert von background-origin bestimmt (standardmäßig die Padding-Box). Wenn der Wert des Hintergrundes background-attachment jedoch fixed ist, ist die Positionierungsfläche stattdessen das gesamte Viewport. Negative Werte sind nicht erlaubt.

Inhärente Dimensionen und Proportionen

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

• Ein Bitmap-Bild (wie JPG) hat immer inhärente Dimensionen und Proportionen.
• Ein Vektorbild (wie SVG) hat nicht unbedingt inhärente Dimensionen. Hat es sowohl horizontale als auch vertikale inhärente Dimensionen, besitzt es auch inhärente Proportionen. Hat es keine Dimensionen oder nur eine Dimension, kann es Proportionen haben oder auch nicht.
• CSS <gradient>s haben keine inhärenten Dimensionen oder Proportionen.
• Hintergrundbilder, die mit der element() Funktion erstellt wurden, verwenden die inhärenten Dimensionen und Proportionen des generierenden Elements.

Basierend auf den inhärenten Dimensionen und Proportionen wird die gerenderte Größe des Hintergrundbildes folgendermaßen berechnet:

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

• Wenn background-size contain oder cover ist: Unter Beibehaltung seiner inhärenten Proportionen wird das Bild in der größten Größe gerendert, die innerhalb der Hintergrundpositionierungsfläche enthalten ist oder diese abdeckt. Hat das Bild keine inhärenten Proportionen, wird es in der Größe der Hintergrundpositionierungsfläche gerendert.

• Wenn background-size auto oder auto auto ist:

  • Hat das Bild sowohl horizontale als auch vertikale inhärente Dimensionen, wird es in dieser Größe gerendert.
  • Hat das Bild keine inhärenten Dimensionen und keine Proportionen, wird es in der Größe der Hintergrundpositionierungsfläche gerendert.
  • Hat das Bild keine inhärenten Dimensionen, aber Proportionen, wird es gerendert, als ob contain angegeben worden wäre.
  • Hat das Bild nur eine inhärente Dimension und Proportionen, wird es in der Größe der einen Dimension gerendert, wobei die andere Dimension mit der angegebenen Dimension und den inhärenten Proportionen berechnet wird.
  • Hat das Bild nur eine inhärente Dimension, aber keine Proportionen, wird es mit der angegebenen Dimension und der anderen Dimension der Hintergrundpositionierungsfläche gerendert.

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

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

  • Hat das Bild inhärente Proportionen, wird es auf die angegebene Dimension gestreckt. Die nicht spezifizierte Dimension wird mit der angegebenen Dimension und den inhärenten Proportionen berechnet.
  • Hat das Bild keine inhärenten Proportionen, wird es auf die angegebene Dimension gestreckt. Die nicht spezifizierte Dimension wird mit der entsprechenden inhärenten Dimension des Bildes berechnet, falls vorhanden. Gibt es keine solche inhärente Dimension, wird es die entsprechende Dimension der Hintergrundpositionierungsfläche.

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 möchten vier Kopien dieses Bildes in ein 300x300-Pixel-Element kacheln. Dazu können wir einen festen background-size Wert von 150 Pixel festlegen.

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 skalieren für weitere Beispiele.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Hintergrundbilder skalieren
• SVG-Hintergründe skalieren
• object-fit