Background position in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual result of this CSS background position?

Given this CSS snippet, where will the background image appear inside the box?

div {
  width: 200px;
  height: 200px;
  background-image: url('image.png');
  background-position: right bottom;
  background-repeat: no-repeat;
  border: 1px solid black;
}

A The image is placed at the center of the box.

B The image is stretched to fill the entire box.

C The image is placed at the top-left corner of the box.

D The image is placed at the bottom-right corner of the box.

💡 Hint

Think about the keywords 'right' and 'bottom' in background-position.

The background-position property sets the starting position of the background image. 'right bottom' means the image's bottom-right corner aligns with the box's bottom-right corner.

📝 Syntax

intermediate

Which CSS background-position value is valid?

Choose the only valid CSS background-position value from these options:

A background-position: 50% 50%;

B background-position: left-top;

C background-position: center-middle;

D background-position: 100px 100px 50px;

💡 Hint

Valid values can be keywords or two length/percentage values.

'50% 50%' is valid and centers the background image. 'center-middle' and 'left-top' are invalid keywords. Three values are not allowed.

🧠 Conceptual

advanced

What happens if you use 'background-position: 150% 150%'?

If a box is 200px by 200px and the background image is 100px by 100px, what is the effect of setting background-position: 150% 150%?

A The image is stretched to 150% of the box size.

B The image is positioned outside the box, shifted beyond the bottom-right corner.

C The image is tiled starting at 150px from top-left.

D The image is centered inside the box.

💡 Hint

Percentages in background-position are relative to the box size.

150% means 1.5 times the box size, so the image is placed beyond the bottom-right corner, partially or fully outside the visible area.

❓ selector

advanced

Which CSS selector targets elements with background-position set to 'center'?

You want to style only elements that have background-position: center; set inline or in CSS. Which selector works?

A [style*='background-position: center']

B :has(background-position=center)

C .background-position-center

D [background-position='center']

💡 Hint

Attribute selectors can match inline styles.

Option A uses an attribute selector to find elements whose style attribute contains the text 'background-position: center'. Others are invalid or require classes.

❓ accessibility

expert

How to ensure background-position changes do not reduce accessibility?

If you use background-position to move decorative images, what should you do to keep your page accessible?

A Use background-position only on images with important content.

B Add alt text describing the background image in CSS.

C Use <code>aria-hidden="true"</code> on elements with decorative backgrounds.

D Avoid using background images altogether.

💡 Hint

Decorative images should be hidden from screen readers.

Background images are decorative and not read by screen readers. Using aria-hidden="true" on the element ensures assistive tech ignores it, preventing confusion.

Practice

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