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.