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.

Practice

1. What does the CSS property background-repeat: no-repeat; do to a background image?

easy

A. It repeats the background image horizontally only.

B. It repeats the background image vertically only.

C. It shows the background image only once without repeating.

D. It repeats the background image both horizontally and vertically.

Solution

1. Step 1: Understand the meaning of no-repeat

   The value no-repeat means the background image will not be repeated at all.

2. Step 2: Compare with other repeat options

   Other options like repeat-x or repeat-y repeat the image horizontally or vertically, but no-repeat shows it once.

3. Final Answer:

   It shows the background image only once without repeating. -> Option C

4. Quick Check:

   no-repeat means no repeating [OK]

Hint: No-repeat means show image once only, no copies [OK]

Common Mistakes:

• Confusing no-repeat with repeat-x or repeat-y
• Thinking no-repeat repeats image once horizontally
• Assuming no-repeat repeats vertically

2. Which of the following is the correct CSS syntax to repeat a background image only horizontally?

easy

A. background-repeat: repeat;

B. background-repeat: repeat-y;

C. background-repeat: no-repeat;

D. background-repeat: repeat-x;

Solution

1. Step 1: Recall the CSS values for background-repeat

   repeat-x repeats the background image horizontally, repeat-y vertically, no-repeat no repetition, and repeat repeats both ways.

2. Step 2: Match the requirement

   The question asks for horizontal repetition only, so repeat-x is correct.

3. Final Answer:

   background-repeat: repeat-x; -> Option D

4. Quick Check:

   Horizontal repeat = repeat-x [OK]

Hint: repeat-x means horizontal repeat, repeat-y means vertical [OK]

Common Mistakes:

• Mixing up repeat-x and repeat-y
• Using repeat instead of repeat-x for horizontal only
• Forgetting the hyphen in repeat-x

3. Given the CSS below, how will the background image behave?

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

medium

A. The image repeats vertically down the height.

B. The image repeats both horizontally and vertically.

C. The image shows once without repeating.

D. The image repeats horizontally across the width.

Solution

1. Step 1: Understand background-repeat: repeat-y;

   This value repeats the background image vertically along the height of the element.

2. Step 2: Apply to the div dimensions

   The div is 200px wide and 400px tall, so the image will stack vertically down the 400px height.

3. Final Answer:

   The image repeats vertically down the height. -> Option A

4. Quick Check:

   repeat-y means vertical repeat [OK]

Hint: repeat-y repeats image vertically down the element [OK]

Common Mistakes:

• Thinking repeat-y repeats horizontally
• Confusing repeat-y with no-repeat
• Assuming repeat-y repeats both directions

4. Identify the error in this CSS snippet if the goal is to repeat the background image both horizontally and vertically:

section {
  background-image: url('tile.png');
  background-repeat: repeat-x;
}

medium

A. The value repeat-x repeats only horizontally, not vertically.

B. The property background-repeat is misspelled.

C. The URL must be in double quotes, not single quotes.

D. The background image will not show without background-size.

Solution

1. Step 1: Check the background-repeat value

   repeat-x repeats the image only horizontally, not vertically.

2. Step 2: Match with the goal

   The goal is to repeat both horizontally and vertically, so repeat should be used instead.

3. Final Answer:

   The value repeat-x repeats only horizontally, not vertically. -> Option A

4. Quick Check:

   repeat-x = horizontal only, not both [OK]

Hint: repeat-x repeats horizontally only, use repeat for both [OK]

Common Mistakes:

• Using repeat-x when both directions are needed
• Thinking single quotes break URL syntax
• Assuming background-size is required for repeat

5. You want a background image to repeat only vertically but stop after 3 repeats. Which CSS approach can achieve this effect?

hard

A. Use background-repeat: no-repeat; and add 3 copies of the image manually.

B. Use background-repeat: repeat-y; and set the container height to 3 times the image height.

C. Use background-repeat: repeat; and limit repeats with background-size.

D. Use background-repeat: repeat-x; and set max repeats to 3.

Solution

1. Step 1: Understand CSS background-repeat limits

   CSS does not have a direct property to limit the number of repeats.

2. Step 2: Use container size to control repeats

   By setting background-repeat: repeat-y; and adjusting the container height to exactly 3 times the image height, the image will repeat vertically 3 times and then stop.

3. Final Answer:

   Use background-repeat: repeat-y; and set the container height to 3 times the image height. -> Option B

4. Quick Check:

   Control repeats by container size with repeat-y [OK]

Hint: Limit repeats by container size, not CSS property [OK]

Common Mistakes:

• Expecting CSS to limit repeat count directly
• Using repeat-x instead of repeat-y for vertical repeats
• Trying to limit repeats with background-size