Bird
Raised Fist0
CSSmarkup~5 mins

Background position in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. What does the CSS property background-position control in a webpage?
easy
A. The border style of the element
B. Where the background image is placed inside an element
C. The color of the background
D. The size of the background image

Solution

  1. Step 1: Understand the property purpose

    The background-position property sets the location of the background image inside an element.

  2. Step 2: Compare with other properties

    Other properties like background-size control size, and background-color controls color, not position.

  3. Final Answer:

    Where the background image is placed inside an element -> Option B

  4. Quick Check:

    Background position = image placement [OK]
Hint: Background-position sets image location inside element [OK]
Common Mistakes:
  • Confusing background-position with background-size
  • Thinking it changes background color
  • Assuming it controls element borders
2. Which of the following is the correct syntax to set the background image position to the top right corner?
easy
A. background-position: left bottom;
B. background-position: top left;
C. background-position: right top;
D. background-position: center center;

Solution

  1. Step 1: Recall keyword order for background-position

    The correct order is horizontal first, then vertical. So top right is incorrect order.

  2. Step 2: Check options carefully

    background-position: top left; uses top left, which is vertical then horizontal, so it is incorrect. background-position: right top; uses right top, which is horizontal then vertical, the correct order.

  3. Final Answer:

    background-position: right top; -> Option C

  4. Quick Check:

    Horizontal then vertical = right top [OK]
Hint: Write horizontal first, then vertical in background-position [OK]
Common Mistakes:
  • Swapping horizontal and vertical keywords
  • Using invalid keyword combinations
  • Forgetting semicolon at end
3. Given the CSS rule: 
div { background-image: url('flower.png'); background-position: 50% 100%; }
Where will the background image appear inside the div?
medium
A. At the bottom right corner
B. At the top left corner
C. Centered both horizontally and vertically
D. Centered horizontally and at the bottom vertically

Solution

  1. Step 1: Understand percentage values in background-position

    50% means horizontally centered, 100% means vertically at the bottom edge.

  2. Step 2: Match percentages to position

    So the image is horizontally centered and vertically aligned at the bottom inside the div.

  3. Final Answer:

    Centered horizontally and at the bottom vertically -> Option D

  4. Quick Check:

    50% horizontal + 100% vertical = center bottom [OK]
Hint: Percentages: 50% center, 100% bottom [OK]
Common Mistakes:
  • Mixing up horizontal and vertical order
  • Assuming 100% means top
  • Confusing percentages with pixels
4. Identify the error in this CSS snippet:
section { background-position: 20px 30px 40px; }
medium
A. Too many values for background-position
B. Missing units for values
C. Incorrect property name
D. Background image not specified

Solution

  1. Step 1: Check the number of values for background-position

    The property accepts one or two values: horizontal and optional vertical. Here, three values are given, which is invalid.

  2. Step 2: Verify other options

    Units are present (px), property name is correct, and background image can be set separately, so those are not errors here.

  3. Final Answer:

    Too many values for background-position -> Option A

  4. Quick Check:

    background-position accepts max 2 values [OK]
Hint: Use max two values: horizontal and vertical [OK]
Common Mistakes:
  • Adding extra values beyond two
  • Forgetting units on length values
  • Confusing property names
5. You want a background image to appear exactly 10px from the left and 20% from the top inside a container. Which CSS rule correctly sets this?
hard
A. background-position: 10px 20%;
B. background-position: 20% 10px;
C. background-position: left 10px top 20%;
D. background-position: 10% 20px;

Solution

  1. Step 1: Understand order of values in background-position

    The first value is horizontal (left to right), the second is vertical (top to bottom).

  2. Step 2: Match values to desired position

    10px from left means horizontal = 10px; 20% from top means vertical = 20%. So background-position: 10px 20%; is correct.

  3. Final Answer:

    background-position: 10px 20%; -> Option A

  4. Quick Check:

    Horizontal then vertical = 10px 20% [OK]
Hint: Horizontal first, vertical second in background-position [OK]
Common Mistakes:
  • Swapping horizontal and vertical values
  • Using wrong units for values
  • Adding keywords incorrectly