background-position
Where the background image is placed inside the block.
Syntax
background-position: x y;Values
| Parameter | Type | Description |
|---|---|---|
| center | top | right | bottom | left | keyword | Keywords; one or two of them: `right bottom`. |
| x y | length | Offsets from the top left corner: `20px 10px`, `30% 50%`. |
Examples
The same picture cropped from the left, the center and the right:
<style>
div {
display: inline-block;
width: 120px; height: 120px;
border: 1px solid gray;
background: url(/media/photo-400x250.jpg) no-repeat;
background-size: auto 120px;
}
</style>
<div style="background-position: left;"></div>
<div style="background-position: center;"></div>
<div style="background-position: right;"></div>Notes
With background-size: cover the position decides which part of the photo stays visible — for a portrait, center top keeps the face.
See also
- background-size — The size of a background image.
- background-image — One or more background images: files or gradients.
- object-position — Which part of a cropped `<img>` or `<video>` stays visible.
Related recipes
In the tutorial
- Backgrounds and borders — Background images, their repeat, size and position, border styles, rounded corners and outline.