CSS baggrund gentagelse

CSS baggrundsgentagelse

Som standardbaggrundsbillede Egenskaben gentager billedet både lodret og vandret.

Nogle billeder er kun egnet til at gentages i lodret eller vandret retning, ellers vil de se mærkelige ud, sådan som vist herunder:

Eksempel

body {
  baggrundsbillede: url("gradient_bg.png");
}

Prøv det selv

Hvis det ovennævnte billede kun gentages horisontalt (baggrundsgentagelse: gentag vandret;) vil baggrunden se bedre ud:

Eksempel

body {
  baggrundsbillede: url("gradient_bg.png");
  baggrundsgentagelse: gentag vandret;
}

Prøv det selv

Tip:Hvis du vil gentage billedet lodret, skal du indstille baggrundsgentagelse: gentag lodret;。

CSS baggrundsgentagelse: ikke gentag

background-repeat Egenskaben kan også specificere, at baggrundsbilledet kun vises én gang:

Eksempel

Baggrundsbilledet vises kun én gang:

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

Prøv det selv

I det foregående eksempel er baggrundsbilledet og teksten placeret på samme sted. Vi vil ændre billedets placering for at undgå, at billedet forstyrrer teksten for meget.

CSS background-position

background-position Egenskaben bruges til at specificere placeringen af baggrundsbilledet.

Eksempel

Placer baggrundsbilledet i øjrehøjre hjørne:

body {
  background-image: url("tree.png");
  background-repeat: ikke gentag;
  background-position: højre øverst;
}

Prøv det selv