CSS background-position-y Property

Definition and Usage

background-position-y The property is used to set the position of the background image on the y-axis.

Tip:By default, the background image is placed at the top left corner of the element and repeated in both vertical and horizontal directions.

How to position the background image on the y-axis:

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

How to position the background image at the top:

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

How to position the background image vertically using percentages:

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

How to position the background image vertically using pixels:

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

background-position-y: value;

Value	Description
top	Aligns the background position at the top of the y-axis.
bottom	Aligns the background position at the bottom of the y-axis.
center	Aligns the background position at the center of the y-axis.
y%	The top of the y-axis is 0%, and the bottom is 100%. Percentage values refer to the height of the background positioning area minus the height of the background image.
ypos	The vertical distance from the top. The unit can be pixels (such as 0px) or other CSS Units.
ypos offset	Dual-value syntax, supported only in Firefox and Safari. ypos Set to top or bottom. offset It is the vertical distance from the top or bottom of the background image. The unit can be pixels or other CSS Units.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Default Value:	0%
Inheritance:	No
Animation Creation:	Supported. See:Animation-related attributes.
Version:	CSS3
JavaScript Syntax:	object.style.backgroundPositionY="center"