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

Standardwert

repeat

anwendbar auf

alle Elemente

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

Siehe auch

• CSS/Tutorials/Hintergrund/Gestaltung mit CSS

Weblinks

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

Kachelung von Hintergrundbildern

früher üblich - hier auf die Spitze getrieben,

Beispiel ansehen …

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

ansehen …