Background-position
The CSS background-position property specifies the position of a background image within an element.
CSS in Depth, Second Edition
The CSS background-position property specifies the position of a background image within an element.
- How it is used
- Positions a background image within an element and clarifies two-value ordering alongside related visual properties.
- How deep it goes
- Explains the horizontal-then-vertical rule and its Cartesian rationale, but does not develop positioning edge cases or image-rendering behavior.
- Examples
- Uses 25% 75% for background positioning and 10px 2px for an analogous box-shadow coordinate example.
- What you can do after
- Apply background-position values by reading two measurements as horizontal x followed by vertical y.
Read how CSS in Depth, Second Edition explains background-position →
Web Design Playground, Second Edition
The CSS background-position property specifies the starting horizontal and vertical position of a background image within an element.
- How it is used
- Positions the starting point of a background image or its tiling within an element.
- How deep it goes
- Defines two-axis values, defaults, nine keyword combinations, and hero-image usage; defers additional length units to Chapter 7.
- Examples
- Uses nine keyword positions, a centered Toronto hero image, and custom bullet alignment.
- What you can do after
- Apply it via CSS to align background images, create a centered cover-style hero image, or position a custom bullet.
Read how Web Design Playground, Second Edition explains background-position →
Related concepts
- style propertykind of · A style property is a named setting or interface attribute that specifies or exposes a presentation characteristic of an element or view.
- coordinate systemuses · A coordinate system is a framework for specifying the positions of points or other geometric entities using numerical coordinates relative to defined references, such as an origin and axes.
- background propertyimplemented by · The CSS background shorthand property sets multiple background-related properties for an element in a single declaration.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.