background-position sets where a background image or its tiling begins inside an element. Think of it as choosing the image’s starting square: left, center, or right horizontally, and top, center, or bottom vertically. section 6.10
The property accepts two position values:
- Horizontal: left, center, right, a percentage, or a length such as pixels. section 6.10
- Vertical: top, center, bottom, a percentage, or a length such as pixels. section 6.10
- left top is the default, equivalent to 0% 0% and 0px 0px. section 6.10
Center a hero image
A full-window hero can center its image with background-position: center center. Combine it with background-size: cover so the image fills the element; width: 100vw and height: 100vh make the element match the browser window. section 6.11
element {
background-image: url(file);
background-position: horizontal vertical;
}
Use the horizontal vertical syntax as a quick template for positioning a background image. section 6.10
