Hinweis

Aufgrund technischer Probleme ist unser Forum im Moment nicht erreichbar. Wir bitten um Verständnis und hoffen auf Beseitigung der Schwierigkeiten bis spätestens Montag, 25.6. Unser Blog und unser Wiki sind nach wie vor auch im Moment verfügbar.

CSS/Eigenschaften/Hintergrundfarben und -bilder/background-size

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Sie können jedes der Hintergrundbilder mithilfe der Eigenschaft background-size skalieren.

  • CSS 3.0
  • IE 9
  • Firefox
  • Safari
  • Chrome
  • Opera
Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>background-size</title>
    <style>
      ...
      #eins { background-size: 50px;}
      #zwei { background-size: auto 100px;}
      #drei { background-size: 50%; }
      #vier { background-size: 50% 100%; }
      #fuenf { background-size: contain; }
      #sechs { background-size: cover; }
    </style>
  </head>
  <body>
    <h1>Hintergrundbilder skalieren</h1>
    <div id="eins"><span class="caption">50px</span></div>
    <div id="zwei"><span class="caption">auto 100px</span></div>
    <div id="drei"><span class="caption">50%</span></div>
    <div id="vier"><span class="caption">50% 100%</span></div>
    <hr>
    <div id="fuenf"><span class="caption">contain</span></div>
    <div id="sechs"><span class="caption">cover</span></div>
  </body>
</html>

Mit background-size können Sie die Größe der Hintergrundgrafiken unabhängig von anderen Darstellungsoptionen festlegen. Erlaubt sind dabei die Schlüsselwörter:

  • auto, Voreinstellung übernimmt die Maße der Grafik, keine Skalierung
  • contain, passt unter Beibehaltung des Seitenverhältnisses die größere Seite der Grafik in den Anzeigebereich ein
  • cover, passt unter Beibehaltung des Seitenverhältnisses die kleinere Seite der Grafik in den Anzeigebereich ein, ergibt eine vollständige Füllung des Anzeigebereiches

Weiterhin:

Die erste Angabe spezifiziert die gewünschte Breite der Hintergrundgrafik, die zweite entsprechend die Höhe. Ist nur ein Wert gegeben, so wird die Höhe unter Beibehaltung des Seitenverhältnisses skaliert.

Beispiel
{ background-size: 100px; } 
{ background-size: 100px auto; } /* sind identische Angaben */

Soll nur die Höhe festgelegt werden, so kann dies mit background-size: auto 100px; geschehen. Prozentangaben sind im Gegensatz zu negativen Werten ebenfalls erlaubt. Sie beziehen sich auf die entsprechenden Angaben des Anzeigebereichs.