background-position specifies where a background image begins within an element. When it receives two values, read them as a Cartesian coordinate: horizontal first, then vertical. section 1.4.2 section 13.1
Use the value order deliberately:
- background-position: 25% 75% places the horizontal value first and the vertical value second. section 1.4.2
- Treat two-value positioning like x, y measurements, unlike four-sided properties such as padding, which use a different order. section 1.4.2
- Keep background-position separate when combining several background settings, because the background shorthand resets unspecified properties to their initial values. section 13.1
Read the coordinates like a grid
For background-position: 25% 75%, 25% controls the image’s horizontal position and 75% controls its vertical position. The same x-then-y reasoning appears in box-shadow: 10px 2px, where the larger first value is horizontal and the second is vertical. section 1.4.2
Listing 1.23 box-shadow specifies x value and then y value
.nav .featured {
background-color: orange;
box-shadow: 10px 2px #6f9090; #1
}
Compare the box-shadow listing to background-position to see the shared x-then-y convention for two measurements. section 1.4.2
