PROFI-FOTOS-online.com - Der eigene Online-Shop für Profi-Fotografen - Einfach. Günstig. Fair.

CSS-Eigenschaft: background-size, Kategorien: Hintergründe (allgemein), Backgrounds and Borders (CSS 3)

Größe des Hintergrundbildes

Bestimmt die Größe des Hintergrundbildes.

CSS-Eigenschaft: background-size
KurzbeschreibungWerteStandardwertKategorieHinweis
Größe des Hintergrundbildes
  • <length>
  • <percentage>
  • auto
  • cover
  • contain
auto
Allgemein:
Hintergründe
CSS 3:
Backgrounds and Borders
Neu in CSS 3
 

Verwandte Eigenschaften aus der Kategorie: Hintergründe (allgemein), Backgrounds and Borders (CSS 3):

Folgendes ist beim Einsatz von background-size zu beachten:

Über background-size kann die Größe von Hintergrundgrafiken gesteuert werden. Folgende Werte sind dabei zulässig:

  • [x-Wert] [y-Wert]
    Zwei Werte für die Breite und Höhe der Hintergrundgrafik. Dabei sind relative Werte (%, em, z.B. 50% 50%) und absolute Werte (px, usw., z.B. 120px 80px) möglich. %-Angaben beziehen sich dabei auf die Ausmaße des betreffenden HTML-Elements. Unterschiedliche Einheiten für x- und y-Wert sind möglich (z.B. 30% 200px).
    • Der Wert auto kann sowohl für den x- als auch den y-Wert vergeben werden (z.B. 100px auto). Die Höhe bzw. Breite wird dann aus dem Seitenverhältnis der Grafik automatisch berechnet.
    • Wird statt zwei Werten nur ein Wert angegeben, wird der zweite Wert durch auto ergänzt (bzw. auto ist der Standardwert). Die Höhe der Grafik wird dann aus dem Seitenverhältnis automatisch berechnet (Siehe Beispiel Nr. 15).
  • cover
    bewirkt, dass die komplette Fläche eines Elements gefüllt wird. Dabei wird die Größe der Grafik im ursprünglichen Seitenverhältnis verändert, dass die Grafik in voller Höhe oder Breite angezeigt wird. Die kürzere Länge ist dabei entscheidend für die Größe der Grafik (siehe Beispiele Nr. 10 und Nr. 11).
  • contain
    bewirkt, dass die Hintergrundgrafik 1 Mal komplett im verfügbaren Platz angezeigt wird. Auch hier wird das Seitenverhältnis der Grafik beibehalten, hier entscheidet die längere Länge von Höhe bzw. Breite die Grundlage für die Skalierung der Grafik (siehe Beispiele Nr. 8 und Nr. 9).

background-size kann mit anderen CSS-Eigenschaften für Hintergrundgrafiken kombiniert werden, beispielsweise mit background-color, um hinter der Hintergrundgrafik eine Farbe anzuzeigen (setzt voraus, dass die Grafik nicht komplett gekachelt ist).
Auch die Kombination mit background-repeat und dem Wert round ist möglich. In dem Fall werden die Größenangaben in background-size als Basis verwendet, um die Grafikgröße per Rundung zu ermitteln, damit diese genau in den verfügbaren Platz passt. Allerdings scheitert dies bei Firefox und Safari, da diese den Wert round für background-repeat nicht unterstützen (siehe Beispiel Nr. 7).

In der Kurzschreibweise background müssen die Werte für background-size hinter einem Slach / angegeben werden, damit diese greifen (Beispiel:
background: #ff0000 url('grafik.png') left top / 180px 100px no-repeat;). Neben den Werten für background-size müssen auch die Werte für background-repeat, background-attachment und background-clip hinter dem Slash / notiert werden.
Der Safari scheitert an der Kurzschreibweise.

background-size wird von allen marktrelevanten Browsern unterstützt, mit Ausnahme des Internet Explorers 8. Für den IE8 kann die Eigenschaft filter des AlphaImageLoader genutzt werden (siehe Beispiel Nr. 16). Allerdings sind die Möglichkeiten von filter begrenzt und decken nur einen Teil der background-size-Möglichkeiten ab. Mehr darüber auf den Seiten von Microsoft: AlphaImageLoader: sizingMethod Attribute | sizingMethod Property.

Browserunterstützung von background-size
Firefox
Firefox		Google Chrome
Google
Chrome		Internet Explorer
Internet
Explorer		Safari
Safari		Opera
Opera
CSS3
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
nj
Version: 4Version: 5Version: 6Version: 7
w
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu background-size:



Beispiele

HTML:

<div id="example-1"> </div>

CSS:

div {
    border: 4px solid #cccccc;
    height: 225px;
}

/* Größe und Rahmen für den "grauen Kasten" - wirkt in allen Beispielen. */

#example-1 {
   background-image: url('/img/css-wiki.png');
   background-repeat: no-repeat;
   background-position: center center;
}

/* Beispiel einer Hintergrundgrafik nach CSS 2.1 Standard: Hintergrundbild wird nicht gekachelt und zentriert. 
Dabei entspricht die Größendarstellung der Größe der Grafik selber.*/
Beispiel nur für: FirefoxGoogle ChromeInternet ExplorerSafariOpera

Beispiel Nr. 1 So sieht's aus:

 

HTML:

<div id="example-2"> </div>

CSS:

#example-2 {
   background-image: url('/img/css-wiki.png');
   background-repeat: no-repeat;
   background-position: center center;

   background-size: 50% 50%;
}

/* Über background-size wird die Größe der Hintergrundgrafik definiert. 
Hier in Prozentangaben, diese Angabe bezieht sich auf die Größe des HTML-Elements, für das die Hintergrundgrafik definiert ist.*/
Beispiel nur für: FirefoxGoogle ChromeInternet Explorer
W3C: 9
SafariOpera

Beispiel Nr. 2 So sieht's aus:

 

HTML:

<div id="example-3"> </div>

CSS:

#example-3 {
   background-image: url('/img/css-wiki.png');
   background-position: center center;
   background-repeat: no-repeat;

   background-size: auto 50%;
}

/* Sollen die Seitenverhältnisse der Hintergrundgrafik erhalten bleiben, kann einer der beiden Parameter auf auto gesetzt werden. */
Beispiel nur für: FirefoxGoogle ChromeInternet Explorer
W3C: 9
SafariOpera

Beispiel Nr. 3 So sieht's aus:

 

HTML:

<div id="example-4"> </div>

CSS:

#example-4 {
   background-image: url('/img/css-wiki.png');

   background-size: 50% 50%;
}

/* Ohne die Angabe von background-repeat wird die Hintergrundgrafik gekachelt, ohne background-position
wird die Grafik links oben positioniert und von dort aus gekachelt (Beides Standardwerte der jeweiligen CSS-Eigenschaft). */
Beispiel nur für: FirefoxGoogle ChromeInternet Explorer
W3C: 9
SafariOpera

Beispiel Nr. 4 So sieht's aus:

 

HTML:

<div id="example-5"> </div>

CSS:

#example-5 {
   background-image: url('/img/css-wiki.png');

   background-size: 33.3333% 100%;
}

/* Beispiel mit unterschiedlichen Prozentangaben. Der erste Wert steuert die Dimension in der Breite, 
der zweite die Größe Höhe. */
Beispiel nur für: FirefoxGoogle ChromeInternet Explorer
W3C: 9
SafariOpera

Beispiel Nr. 5 So sieht's aus:

 

HTML:

<div id="example-6"> </div>

CSS:

#example-6 {
   background-image: url('/img/css-wiki.png');

   background-size: 25px 25px;
}

/* Statt Prozentangaben können auch absolute Werte für die Größe der Hintergrundgrafik vergeben werden. */
Beispiel nur für: FirefoxGoogle ChromeInternet Explorer
W3C: 9
SafariOpera

Beispiel Nr. 6 So sieht's aus:

 

HTML:

<div id="example-7"> </div>

CSS:

#example-7 {
   background-image: url('/img/css-wiki.png');
   background-repeat: round;

   background-size: 100px 100px;
}

/* In Kombination mit background-repeat: round wird die vorgegebene Höhe und Breite 
der Hintergrundgrafik "gerundet", also so verändert, 
dass sich die Grafik an den vorhandenen Platz anpasst. */

/* Firefox und Safari unterstützen den Wert round für background-repeat nicht.*/
Beispiel nur für: Google ChromeInternet Explorer
W3C: 9
Opera

Beispiel Nr. 7 So sieht's aus:

 

HTML:

<div id="example-8"> </div>

CSS:

#example-8 {
   background-image: url('/img/css-wiki.png');
   
   background-size: contain;
}

/* Der Parameter "contain" bewirkt, dass die Größe der Hintergrundgrafik 
abhängig von der Größe des HTML-Elements kalkuliert wird. Dabei wird die Größe so berechnet, dass die Grafik 
bei gleichbleibendem  Seitenverhältnis in voller Höhe und Breite vollständig angezeigt wird. 
Hier bestimmt die längere Seitenkante die Größe der Grafik. */
Beispiel nur für: FirefoxGoogle ChromeInternet Explorer
W3C: 9
SafariOpera

Beispiel Nr. 8 So sieht's aus:

 

HTML:

<div id="example-9"> </div>

CSS:

#example-9 {
   background-image: url('/img/css-wiki.png');
   background-position: center center;
   background-repeat: no-repeat;
   
   background-size: contain;
}

/* Ähnlich wie Beispiel 8 mit dem Parameter contain. Hier wird die Grafik zusätzlich zentriert und die Kachelung deaktiviert. */
Beispiel nur für: FirefoxGoogle ChromeInternet Explorer
W3C: 9
SafariOpera

Beispiel Nr. 9 So sieht's aus:

 

HTML:

<div id="example-10"> </div>

CSS:

#example-10 {
   background-image: url('/img/css-wiki.png');
   
   background-size: cover;
}

/* Der Parameter cover bewirkt ebenfalls, dass die Größe der Hintergrundgrafik 
abhängig von der Größe des HTML-Elements kalkuliert wird. 
Allerdings wird die Größe bei gleichbleibendem Seitenverhältnis so berechnet, dass die volle Fläche gefüllt wird. 
Hier bestimmt die kürzere Seitenkante die Größe der Grafik. */
Beispiel nur für: FirefoxGoogle ChromeInternet Explorer
W3C: 9
SafariOpera

Beispiel Nr. 10 So sieht's aus:

 

HTML:

<div id="example-11"> </div>

CSS:

#example-11 {
   background-image: url('/img/css-wiki.png');
   background-position: center center;
   
   background-size: cover;
}

/* Ähnlich wie Beispiel Nr. 10. Hier wird die Grafik zusätzlich zentriert. */
Beispiel nur für: FirefoxGoogle ChromeInternet Explorer
W3C: 9
SafariOpera

Beispiel Nr. 11 So sieht's aus:

 

HTML:

<div id="example-12"> </div>

CSS:

#example-12 {
   background-image: url('/img/css-wiki.png');
   background-position: center center;
   
   background-size: 100px 75%;
}

/* Unterschiedliche Einheiten der Höhen- und Breitenangaben sind möglich. */
Beispiel nur für: FirefoxGoogle ChromeInternet Explorer
W3C: 9
SafariOpera

Beispiel Nr. 12 So sieht's aus:

 

HTML:

<div id="example-13"> </div>

CSS:

#example-13 {
   background-image: url('/img/css-wiki.png');
   background-position: center center;
   background-repeat: no-repeat;
   background-color: lightgreen;
   
   background-size: 8em auto;
}

/* Eine Kombination mit einer Hintergrundfarbe ist ohne weiteres möglich. */
Beispiel nur für: FirefoxGoogle ChromeInternet Explorer
W3C: 9
SafariOpera

Beispiel Nr. 13 So sieht's aus:

 

HTML:

<div id="example-14"> </div>

CSS:

#example-14 {
   background: gold url('/img/css-wiki.png')  center center / 180px 100px no-repeat;
}

/* In der Kurzschreibweise muss eine Angabe für background-size hinter einem trennenden Slash / stehen 
(Neben den Werten für background-repeat, background-attachment  und background-clip ). */

/* Safari versagt bei der Kurzschreibweise. */
Beispiel nur für: FirefoxGoogle ChromeInternet Explorer
W3C: 9
Opera

Beispiel Nr. 14 So sieht's aus:

 

HTML:

<div id="example-15"> </div>

CSS:

#example-15 {
   background-image: url('/img/css-wiki.png');
   background-position: center center;
   background-repeat: no-repeat;
   
   background-size: 180px;
}

/* Wird nur ein Wert für background-size vergeben, wird der zweite, fehlende Wert durch "auto" ergänzt, 
die Höhe wird dann automatisch anhand des Seitenverhältnis der Grafik ermittelt. */
Beispiel nur für: FirefoxGoogle ChromeInternet Explorer
W3C: 9
SafariOpera

Beispiel Nr. 15 So sieht's aus:

 

HTML:

<div id="example-16"> </div>

CSS:

#example-16 {
   background-image: url('/img/css-wiki.png');  
   background-size: 100% 100%;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/css-wiki.png', sizingMethod='scale');
}

/* Für den Internet Explorer 8 stellt "filter" eine Alternative dar, da dieser background-size nicht unterstützt. */
Beispiel nur für: FirefoxGoogle ChromeInternet ExplorerSafariOpera

Beispiel Nr. 16 So sieht's aus:

 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 17. 01. 2024
Render Time: 0.132 sec.