CSS/Eigenschaften/background-repeat

Aus SELFHTML-Wiki
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
  • Defaultwert: repeat
anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Browsersupport Details: caniuse.com
Vererbung nein
animierbar nein
Beispiel
body {
  background-image: url(...);
  background-repeat: no-repeat;
}
Das Hintergundbild 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: 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; 
}
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

Siehe auch