CSS/Eigenschaften/background-repeat

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften(Weitergeleitet von Background-repeat)
Wechseln zu: Navigation, Suche

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

Weblinks

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