CSS background-position-y property

Definition och användning

background-position-y Egenskapen används för att ställa in bakgrundsbildens position på y-axeln.

Tips:Som standard placeras bakgrundsbilden i elementets övre vänstra hörn och upprepas både vertikalt och horisontellt.

Hur man lägger till bakgrundsbilden på y-axeln:

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-y: center;
}

Hur man lägger till bakgrundsbilden till toppen:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: bottom;
}

Hur man använder procent för att positionera bakgrundsbilden på y-axeln:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 50%;
}

Hur man använder pixlar för att positionera bakgrundsbilden på y-axeln:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 80px;
}

background-position-y: value;

Värde	Beskrivning
top	Placera bakgrundspositionen på toppen av y-axeln.
bottom	Placera bakgrundspositionen på botten av y-axeln.
center	Placera bakgrundspositionen i mitten av y-axeln.
y%	Toppen av y-axeln är 0%, botten är 100%. Procentvärdena refererar till höjden på bakgrundens positioneringsområde minus bakgrundsbildens höjd.
ypos	vertikalt avstånd från toppen. Enheter kan vara pixlar (t.ex. 0px) eller annat CSS units.
ypos offset	tvåvärdes语法，endast stöds av Firefox och Safari. ypos Sätt till top eller bottom. offset är horisontell avståndet från bakgrundsbilden till toppen eller botten av ypos-inställningen. Enheter kan vara pixlar (t.ex. 0px) eller annat CSS units.
initial	Sätt denna egenskap till dess standardvärde. Se: initial.
inherit	Inheritera denna egenskap från föräldrelementet. Se: inherit.

Standardvärde:	0%
Arv:	Nej
Animering:	Stödjer. Se:Animeringsrelaterade egenskaper.
Version:	CSS3
JavaScript syntax:	object.style.backgroundPositionY="center"