The background-position-y property controls the vertical placement of a background image. It lets you move a background up or down without changing its horizontal position.
Move backgrounds up and down.
top, center, bottom.
Relative y placement.
Exact top offsets.
Split axis control.
Related to background-position.
The background-position-y CSS property sets the vertical starting position of a background image. It affects placement along the y-axis only, leaving the horizontal position to background-position-x or the shorthand background-position.
This is useful when you want to align a decorative icon, badge, or photo to the top, center, or bottom while keeping horizontal placement unchanged.
Use a small non-repeating background with a fixed background-size so vertical movement is easy to see.
Apply background-position-y to control vertical background placement:
selector {
background-position-y: <position>;
}.panel {
background-image: url("icon.svg");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: bottom;
}0%, which aligns the background to the top (same as top).top, center, bottom, percentages, and lengths.background-position-x for horizontal control.background-position: center bottom; is shorthand for both axes together.| Question | Answer |
|---|---|
| Initial value | 0% (top) |
| Applies to | Vertical background placement |
| Inherited | No |
| Animatable | Yes |
| Common use | Top/bottom icons, centered hero focal points, vertical offsets |
The initial value of background-position-y is 0%, which places the background at the top edge of the background positioning area. The keyword top produces the same result.
These are the most common ways to set vertical background placement with background-position-y.
| Value | Example | Meaning |
|---|---|---|
top | background-position-y: top; | Aligns the background to the top edge |
center | background-position-y: center; | Centers the background vertically |
bottom | background-position-y: bottom; | Aligns the background to the bottom edge |
| Percentage | background-position-y: 50%; | Positions relative to element height |
| Length | background-position-y: 24px; | Offsets the background by an exact distance from the top |
topPlaces the background at the top edge of the positioning area.
Default-like alignment.
centerCenters the background vertically inside the element.
Common for hero images.
bottomAligns the background to the bottom edge.
Useful for footer badges.
75%Moves the background toward the bottom using a percentage.
Responsive vertical placement.
background-position-y vs background-position| Property | Controls | Best for |
|---|---|---|
background-position-y | Vertical background placement only | Top/center/bottom alignment without changing x-axis |
background-position | Both horizontal and vertical placement | One-line positioning such as center bottom |
background-position-x | Horizontal background placement only | Left/center/right alignment without changing y-axis |
These panels keep the same horizontal position and change only the vertical value:
background-position-x: center; stays the same in all three panels.
Try background-position-y with bottom placement, top/bottom keywords, pixel offsets, and a multi-value comparison.
Control where a background sits along the y-axis while horizontal placement stays separate.
Place a background at the bottom of an element while keeping it centered horizontally.
.panel {
background-image: url("icon.svg");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: bottom;
}background-position-y: bottom; anchors the background to the bottom edge, while background-position-x: center; keeps it horizontally centered.
Compare the two most common vertical keyword positions.
.top { background-position-y: top; }
.bottom { background-position-y: bottom; }The same background marker moves to opposite vertical edges using keyword values.
Use pixel and percentage values when keywords are not precise enough.
Move a background a fixed distance from the top edge.
.panel {
background-position-y: 24px;
background-position-x: center;
}A length value offsets the background vertically by an exact amount from the top edge. Positive values move it down; negative values move it up.
See how different background-position-y values move the same marker up and down.
.top { background-position-y: top; }
.center { background-position-y: center; }
.percent { background-position-y: 75%; }Only the vertical value changes, so the marker moves up and down while staying horizontally centered.
background-position-y WorksSet an image or gradient with background-image.
Use background-position-y with top, center, bottom, percentages, or pixels.
Control the x-axis with background-position-x or the shorthand background-position.
You can align backgrounds to the top, center, or bottom without affecting horizontal placement.
background-position-y is supported in all modern browsers and works reliably for vertical background placement.
Chrome, Firefox, Safari, Edge, and Opera support keyword, percentage, and length values.
In older browsers, use the shorthand background-position as a fallback when split-axis properties are unavailable.
background-position instead of split x/y propertiesBottom line: Use background-position-y confidently in modern projects, especially with background-position-x for split-axis control.
The background-position-y property gives you direct control over vertical background placement. It is especially useful when you want to align an image to the top, center, or bottom without changing its horizontal position.
Pair it with background-position-x for full two-axis control, or use background-position when a single shorthand declaration is enough.
top, center, and bottom for simple vertical alignmentbackground-position-x when axes need separate controlbackground-position fallback for older browsers if neededbackground-position-y with the full shorthand property0%)background-position-yUse these points when placing backgrounds vertically.
Controls the y-axis.
Purposetop, center, bottom.
ValuesResponsive y placement.
ResponsiveTop edge by default.
DefaultSplit axis control.
CompareOpen the HTML editor, move backgrounds vertically, and experiment with background-position-y instantly.
5 people found this page helpful