CSS bakgrund repetera

CSS bakgrund-upprepning

Som standardbakgrund-bild Egenskapen upprepar bilden både horisontellt och vertikalt.

Vissa bilder är endast lämpliga för att upprepas horisontellt eller vertikalt, annars kommer de att se konstiga ut, som visas här:

Exempel

body {
  bakgrund-bild: url("gradient_bg.png");
}

Prova själv

Om bilden ovan bara upprepas horisontellt (bakgrund-upprepning: upprepning-i-vertikal-riktning;) kommer bakgrunden att se bättre ut:

Exempel

body {
  bakgrund-bild: url("gradient_bg.png");
  bakgrund-upprepning: upprepning-i-vertikal-riktning;
}

Prova själv

Tips:Om du vill upprepa bilden vertikalt, ställ in bakgrund-upprepning: upprepning-i-horisontell-riktning;。

CSS bakgrund-upprepning: ingen-upprepning

background-repeat Egenskapen kan också användas för att specificera att bakgrundsbilden bara ska visas en gång:

Exempel

Bakgrundsbilden visas endast en gång:

body {
  background-image: url("tree.png");
  background-repeat: inte upprepning;
}

Prova själv

I föregående exempel är bakgrundsbilden och texten placerade på samma plats. Vi vill ändra platsen för bilden för att undvika att bilden stör texten för mycket.

CSS background-position

background-position Egenskapen används för att specificera platsen för bakgrundsbilden.

Exempel

Placera bakgrundsbilden i högra övre hörnet:

body {
  background-image: url("tree.png");
  background-repeat: inte upprepning;
  background-position: höger övre hörn;
}

Prova själv