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. Beachten Sie, dass multiple Hintergrundgrafiken nicht von allen Versionen der Browser unterstützt werden.

  • CSS 3.0
  • IE 9
  • Leer
  • Leer
  • Leer
  • Leer
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.

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML