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

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Über die Eigenschaft background-repeat können Sie bestimmen, wie mit Hintergrundbildern verfahren werden soll, falls das Element größer als ein Hintergrundbild ist.

  • CSS 2.1
  • IE
  • Firefox
  • Safari
  • Opera
  • Chrome
  • CSS 3.0
  • IE 9
  • Leer
  • Leer
  • Leer
  • Leer
Beispiel ansehen …
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8"> 
    <title>CSS-Beispiel: background-repeat</title>
    <style>
      div {
	background-image: url("https://wiki.selfhtml.org/mediawiki/images/8/87/Selfhtml-logo.gif");
	height: 109px;
	margin: 1em;
        outline: 1px solid;
        padding: 0;
	width: 30em;
      }
      div code { background-color: white; }		  
      #one     { background-repeat: repeat; }
      #two     { background-repeat: space; }
      #three   { background-repeat: round; }
      #four    { background-repeat: no-repeat; }
    </style>
  </head>
  <body>
    <h1>Kachelung des Hintergrundbildes</h1>
    <div id="one"><code>background-repeat: repeat;</code></div>
    <div id="two"><code>background-repeat: space;</code></div>
    <div id="three"><code>background-repeat: round;</code></div>
    <div id="four"><code>background-repeat: no-repeat;</code></div>
  </body>
</html>

Mit background-repeat lässt sich festlegen, wie die Hintergrundbilder wiederholt werden sollen. Beachten Sie, dass multiple Hintergrundgrafiken nicht von allen Versionen der Browser unterstützt werden. Es wird der gesamte zur Verfügung stehende Platz ausgefüllt. Erlaubt sind dabei folgende Angaben:

  • repeat, Voreinstellung, das Hintergrundbild wird in x- und y-Richtung wiederholt
  • repeat-x, das Hintergrundbild wird nur horizontal wiederholt
  • repeat-y, das Hintergrundbild wird nur vertikal wiederholt
  • no-repeat, keine Wiederholung des Hintergrundbildes

Mit CSS3 wurden die Möglichkeiten von background-repeat erweitert. Erlaubt ist jetzt ein Paar folgender Angaben, wobei der erste Wert die Wiederholung in x-Richtung und der zweite die in y-Richtung bestimmt. Ist nur ein Wert angegeben, so gilt er für beide Richtungen.

  • repeat, Wiederholung des Hintergrundbildes
  • space, es werden soviele Hintergrundbilder wiederholt, wie in der entsprechenden Richtung in das Element hineinpassen ohne das Bild zu beschneiden, ggf. werden die Abstände zwischen den Wiederholungen vergrößert
  • round, ebenso, ggf. wird das Hintergrundbild skaliert
  • no-repeat, keine Wiederholung

Die Angaben {background-repeat: repeat-x;} und {background-repeat: repeat-y;} sind ebenfalls gültig und gleichbedeutend mit {background-repeat: repeat no-repeat;} bzw. {background-repeat: no-repeat repeat;}.