CSS Background Position

background-position says where in the box the image starts. By default it sits in the top-left corner.

Keywords

Use words for the horizontal and vertical position: left, center, right and top, center, bottom.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<style>
  .box {
    height: 100px;
    margin-bottom: 8px;
    border: 1px solid #ccc;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><circle cx="15" cy="15" r="9" fill="orange"/></svg>');
    background-repeat: no-repeat;
    font-size: 14px;
  }
  .a { background-position: left top; }
  .b { background-position: center; }
  .c { background-position: right bottom; }
  .d { background-position: 20px 40px; }
</style>
<div class="box a">left top</div>
<div class="box b">center</div>
<div class="box c">right bottom</div>
<div class="box d">20px 40px</div>

Lengths and percentages

• With lengths (20px 40px), the first number is the distance from the left and the second is from the top.
• With percentages, 50% 50% is the same as center. A percentage lines up that point of the image with the same point of the box, so 100% puts the image’s right edge against the box’s right edge.

Hero images

When a wide photo is cropped to fit a box, position decides which part of it you see. For a portrait where the face is near the top, use background-position: center top.