Background repeat in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does background-repeat: no-repeat; do?

If you apply background-repeat: no-repeat; to an element with a background image, what will happen?

A The background image will appear only once and not repeat.

B The background image will repeat horizontally only.

C The background image will repeat vertically only.

D The background image will repeat both horizontally and vertically.

💡 Hint

Think about what 'no-repeat' means in everyday language.

The no-repeat value means the background image shows only once. It does not tile horizontally or vertically.

📝 Syntax

intermediate

Which CSS rule correctly repeats a background image horizontally only?

Choose the CSS rule that makes the background image repeat only from left to right, but not up and down.

A background-repeat: repeat;

B background-repeat: repeat-y;

C background-repeat: repeat-x;

D background-repeat: no-repeat;

💡 Hint

The 'x' in 'repeat-x' hints at horizontal direction.

repeat-x repeats the background image horizontally only.

❓ rendering

advanced

What will you see with this CSS snippet?

Given this CSS:

div {
  width: 200px;
  height: 100px;
  background-image: url('pattern.png');
  background-repeat: repeat-y;
}

What is the visual effect on the div's background?

CSS

div {
  width: 200px;
  height: 100px;
  background-image: url('pattern.png');
  background-repeat: repeat-y;
}

A The background image repeats both horizontally and vertically.

B The background image repeats horizontally only, side by side.

C The background image appears once, no repetition.

D The background image repeats vertically only, stacking top to bottom.

💡 Hint

Think about the 'y' in 'repeat-y'.

repeat-y repeats the background image vertically only, so the image stacks from top to bottom inside the div.

❓ selector

advanced

Which CSS selector applies background-repeat only to paragraphs inside a section?

You want to apply background-repeat: no-repeat; only to <p> elements inside a <section>. Which selector is correct?

A section p { background-repeat: no-repeat; }

B p section { background-repeat: no-repeat; }

C section > p { background-repeat: repeat; }

D p > section { background-repeat: no-repeat; }

💡 Hint

Think about the order of parent and child in selectors.

section p selects all <p> elements inside any <section>. This is the correct way to target paragraphs inside sections.

❓ accessibility

expert

Why should you be careful using background-repeat with important content images?

If you use a background image with background-repeat: repeat; that contains important information, what accessibility issue might occur?

A Repeated background images improve keyboard navigation for users.

B Screen readers cannot read background images, so repeated images may confuse users relying on assistive technology.

C Background images with repeat always increase page load speed.

D Repeated background images automatically add alt text for screen readers.

💡 Hint

Think about how screen readers treat background images.

Background images are decorative and ignored by screen readers. If important info is only in a repeated background image, users relying on assistive tech may miss it or get confused.