CSS background-repeat property

Definition och användning

background-repeat Hur bakgrundsbilden upprepar sig baseras på egenskapsinställningarna.

Som standard upprepar bakgrundsbilden både horisontellt och vertikalt.

Detaljerad förklaring

background-repeat egenskapen definierar bildens golvmodell.

börjar upprepa från ursprungsbilden, som definieras av background-image definiera och baseras på background-position placera värden.

Se också:

CSS Tutorial:CSS bakgrund

CSS Referenshandbok:background-position egenskapen

HTML DOM Referenshandbok:backgroundRepeat egenskapen

Exempel

body
  {
  background-image: url(stars.gif);
  background-repeat: repeat-y;
  }

Prova själv

Tips och kommentarer

Tips:Bakgrundsbildens position baseras på bakgrund-position egenskapen. Om bakgrund-position egenskapen inte specificeras kommer bilden att placeras i elementets övre vänstra hörn.

CSS Syntax

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

Egenskapsvärde

Egenskapsvärde

Värde Beskrivning
repeat Standard. Bakgrundsbilden kommer att upprepas både horisontellt och vertikalt.
repeat-x Bakgrundsbilden kommer att upprepas horisontellt.
repeat-y Bakgrundsbilden kommer att upprepas vertikalt.
no-repeat Bakgrundsbilden kommer att visas en gång.
inherit Definierar att bakgrund-repeat egenskapen ska ärva inställningar från föräldrelementet.

Tekniska detaljer

Standardvärde: repeat
Inheritance: no
Version: CSS1
JavaScript Syntax: object.style.backgroundRepeat="repeat-y"

Mer exempel

Hur man upprepar bakgrundsbilden vertikalt
Detta exempel visar hur man vertikalt upprepar bakgrundsbilden.
Hur man upprepar bakgrundsbilden horisontellt
Detta exempel visar hur man horisontellt upprepade bakgrundsbilden.
Hur man bara visar bakgrundsbilden en gång
Detta exempel visar hur man bara visar bakgrundsbilden en gång.

Webbläsarstöd

Tabelens nummer anger den första webbläsare som helt stöder egenskapen.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5