CSS/Eigenschaften/background-repeat

Die Eigenschaft background-repeat bestimmt, wie mit Hintergrundbildern verfahren werden soll, falls das Element größer als ein Hintergrundbild ist

erlaubte Werte	repeat = wiederholen (Voreinstellung) repeat-x = nur "eine Zeile lang" waagerecht wiederholen repeat-y = nur "eine Spalte lang" senkrecht wiederholen no-repeat = nicht wiederholen, nur als Einzelbild anzeigen 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 inherit Eigenschaft des Elternelements Vererbung steuernde Werte inherit, initial, unset und revert Defaultwert: repeat
anwendbar auf	alle Elemente
Browsersupport	Details: caniuse.com
Vererbung	nein
animierbar	nein

Beispiel

body {
  background-image: url(...);
  background-repeat: no-repeat;
}

Das Hintergrundbild wird nur einmal angezeigt; nicht gefüllte Flächen bleiben transparent

Beispiel ansehen …

      
div {
	background-image: url("https://wiki.selfhtml.org/mediawiki/images/8/87/Selfhtml-logo.gif");
	height: 109px;
	margin: 1em;
        outline: thin 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; 
}

ansehen …

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

Weblinks

• Spezifikation (W3C): background-repeat
• MDN: background-repeat

Siehe auch

• CSS/Tutorials/Hintergrund/Gestaltung mit CSS

Anwendungsbeispiel

Beispiel ansehen …

   
body { 
  background-image: url("https://wiki.selfhtml.org/images/c/cc/Busy.gif"); 
  background-repeat: repeat;
}

ansehen …