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
|
|
|
|
|---|---|---|---|
| 15.0+ |
4.0+ 3.6 -moz- |
7.0+ |
11.5+ 10.1 -o- |
Übe dein Wissen
