CSS background-position-y Eigenschap

Definitie en gebruik

background-position-y De eigenschap wordt gebruikt om de positie van de achtergrondafbeelding op de as y in te stellen.

Tip:Standaard wordt de achtergrondafbeelding geplaatst in de linkerkantbovenhoek van het element en herhaald in de horizontale en verticale richting.

Hoe achtergrondafbeelding op de as y te positioneren:

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

Hoe achtergrondafbeelding bovenaan te positioneren:

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

Hoe achtergrondafbeelding op de as te positioneren met percentages:

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

Hoe achtergrondafbeelding op de as te positioneren met pixels:

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

background-position-y: waarde;

waarde	beschrijving
top	Plaats de achtergrondpositie aan de top van de as.
bottom	Plaats de achtergrondpositie aan de bottom van de as.
center	Plaats de achtergrondpositie in het midden van de as.
y%	De top van de as is 0%, de bottom is 100%. percentagewaarden verwijzen naar de hoogte van het achtergrondpositiegebied minus de hoogte van de achtergrondafbeelding.
ypos	is de verticale afstand van de top. De eenheid kan pixels zijn (zoals 0px) of andere CSS Eenheid.
ypos offset	tweevoudige syntaxis, alleen ondersteund in Firefox en Safari. ypos zet in op top of bottom. offset is de verticale afstand van de achtergrondafbeelding van de top of bottom ingesteld met ypos. De eenheid kan pixels zijn (zoals 0px) of andere CSS Eenheid.
initial	Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap erft van de ouderlijke element. Raadpleeg inherit.

Standaardwaarde:	0%
inheritantie:	nee
animatie maken:	ondersteund. Raadpleeg:animatiegerelateerde eigenschappen.
Versie:	CSS3
JavaScript syntaxis:	object.style.backgroundPositionY="center"