Contents
Defining the CSS background position
The CSS background-position property is used to specify the initial position for the background image:
body {
background-image: url('fruit-citrus.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left;
}If you're using multiple background images, you can define a different position for each one.
The background position syntax
The syntax for the CSS background-position property is rather intuitive:
background-position: value;
Property values
| Value | Description | Example |
|---|---|---|
| Keywords | Vertical: top (100%) or bottom (0%)Horizontal: left (0%), center (50%) or right (100%) |
background-position: center; |
| Percentages | The X% point of the image will be aligned with the X% point of the container | background-position: 10% 15%; |
| Length units | The image moves the specified distance | background-position: 3cm 50px; |
You can define up to four property values. Usually, two values are defined for horizontal and vertical CSS background image position:
body {
background-image: url('fruit-citrus.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 40% 30%;
}Declaring just one value for the CSS background-position property defines the horizontal offset, and the vertical offset is set to center by default.
You can also combine keywords with numeric values to define the background position in CSS. This way, you have to define four values (two keyword–number pairs) in total. If you skip a numerical value, it will be set to 0 by default:
body {
background-image: url('fruit-citrus.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left 60px top;
}