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. 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;}.