What is Background position in CSS?

CSSmarkup~5 mins

Background position in CSS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Background position lets you choose where a background image appears inside an element. It helps you place the image exactly where you want it.

You want a logo image to appear at the top right corner of a header.

You want a pattern image to start from the center of a box.

You want to move a background photo slightly to the left or down.

You want to align a background image to the bottom of a button.

You want to create a layered look by positioning multiple background images.

Syntax

CSS

background-position: horizontal vertical;

Horizontal and vertical can be keywords (like left, center, right, top, bottom) or length values (like 10px, 2rem) or percentages (like 50%).

If you use one value, the second defaults to center.

Examples

This places the background image exactly in the center horizontally and vertically.

CSS

background-position: center center;

This places the background image at the top right corner of the element.

CSS

background-position: top right;

This moves the background image 20 pixels from the left and 30 pixels from the top.

CSS

background-position: 20px 30px;

This places the background image 75% across horizontally and 50% down vertically inside the element.

CSS

background-position: 75% 50%;

Sample Program

This example shows a box with a small background image placed at the bottom right corner using background-position: bottom right;. The box has a border so you can see the edges clearly.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Background Position Example</title>
<style>
  .box {
    width: 300px;
    height: 200px;
    border: 2px solid #333;
    background-image: url('https://via.placeholder.com/100');
    background-repeat: no-repeat;
    background-position: bottom right;
  }
</style>
</head>
<body>
  <main>
    <section>
      <h1>Background Position Demo</h1>
      <div class="box" aria-label="Box with background image positioned at bottom right"></div>
      <p>The small image is placed at the bottom right corner inside the box.</p>
    </section>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Using keywords like center, top, left is easier for common positions.

Percentages move the image relative to the element's size, which helps with responsive design.

Remember to set background-repeat: no-repeat; if you want only one image and no tiling.

Summary

Background position controls where a background image sits inside an element.

You can use keywords, lengths, or percentages to set horizontal and vertical positions.

It helps you create neat, visually balanced designs by placing images exactly where you want.