Background repeat control in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which Tailwind class prevents background image repetition?

You want a background image to appear only once without repeating. Which Tailwind CSS class should you use?

A bg-no-repeat

B bg-repeat

C bg-repeat-x

D bg-repeat-y

💡 Hint

Think about the class that stops the image from repeating in any direction.

The bg-no-repeat class stops the background image from repeating horizontally or vertically, so it appears only once.

❓ rendering

intermediate

What will you see with this Tailwind background repeat class?

Given this HTML snippet:

<div class="w-40 h-40 bg-[url('https://via.placeholder.com/40')] bg-repeat-x"></div>

What is the visual result in the browser?

Tailwind

<div class="w-40 h-40 bg-[url('https://via.placeholder.com/40')] bg-repeat-x"></div>

A Background image repeats only vertically down the div

B Background image repeats only horizontally across the div

C Background image repeats both horizontally and vertically

D Background image does not repeat at all

💡 Hint

The class name ends with '-x'.

The bg-repeat-x class repeats the background image only along the horizontal axis (left to right), so you see multiple images side by side horizontally.

🧠 Conceptual

advanced

Why use bg-repeat-y instead of bg-repeat-x?

You want a background image to repeat vertically but not horizontally. Which Tailwind class achieves this, and why?

A bg-no-repeat, because it repeats vertically

B bg-repeat-x, because it repeats vertically

C bg-repeat, because it repeats vertically

D bg-repeat-y, because it repeats vertically

💡 Hint

Look carefully at the axis indicated by the class suffix.

The bg-repeat-y class repeats the background image vertically (top to bottom) only. The -y suffix means vertical repetition.

📝 Syntax

advanced

Which Tailwind class is invalid for controlling background repeat?

Identify the invalid Tailwind CSS class from the options below that tries to control background repeat behavior.

A bg-repeat

B bg-repeat-space

C bg-repeat-none

D bg-repeat-round

💡 Hint

One class does not exist in Tailwind's background repeat utilities.

bg-repeat-none is not a valid Tailwind class. The correct class to prevent repetition is bg-no-repeat.

❓ accessibility

expert

How to ensure background images with repeat do not reduce accessibility?

When using repeating background images with Tailwind CSS, what is the best practice to keep your site accessible for all users?

A Use background images only for decoration and provide sufficient color contrast for text

B Use background images as the only way to convey important information

C Avoid using any background images to prevent distractions

D Use very small repeating images to reduce page load time

💡 Hint

Think about users who rely on screen readers or have vision impairments.

Background images should be purely decorative and not contain important information. Ensure text has good contrast so everyone can read it easily.

Practice

1. Which Tailwind CSS class will make a background image repeat both horizontally and vertically?

easy

A. bg-repeat-x

B. bg-no-repeat

C. bg-repeat

D. bg-repeat-y

Solution

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

   The class bg-repeat makes the background image repeat both horizontally and vertically by default.

2. Step 2: Compare with other classes

   bg-no-repeat stops repetition, bg-repeat-x repeats only horizontally, and bg-repeat-y repeats only vertically.

3. Final Answer:

   bg-repeat -> Option C

4. Quick Check:

   Full background repeat = bg-repeat [OK]

Hint: Full repeat uses bg-repeat class [OK]

Common Mistakes:

• Confusing bg-no-repeat as repeat
• Using bg-repeat-x or bg-repeat-y for full repeat
• Forgetting that bg-repeat repeats both directions

2. Which of the following is the correct Tailwind CSS class to prevent a background image from repeating?

easy

A. bg-no-repeat

B. bg-repeat

C. bg-repeat-all

D. bg-repeat-none

Solution

1. Step 1: Identify the class that stops repetition

   The class bg-no-repeat stops the background image from repeating.

2. Step 2: Check other options for validity

   bg-repeat repeats, bg-repeat-all and bg-repeat-none are not valid Tailwind classes.

3. Final Answer:

   bg-no-repeat -> Option A

4. Quick Check:

   No repeat = bg-no-repeat [OK]

Hint: No repeat uses bg-no-repeat class [OK]

Common Mistakes:

• Using bg-repeat instead of bg-no-repeat
• Assuming bg-repeat-none exists
• Confusing bg-no-repeat with bg-repeat-x or bg-repeat-y

3. What will be the visual effect of this Tailwind CSS class on a background image?

<div class="bg-repeat-x bg-[url('/pattern.png')] h-40 w-40"></div>

medium

A. Background image repeats only horizontally

B. Background image repeats only vertically

C. Background image repeats both horizontally and vertically

D. Background image does not repeat

Solution

1. Step 1: Understand the bg-repeat-x class

   This class repeats the background image only along the horizontal axis (left to right).

2. Step 2: Confirm no vertical repeat

   Since bg-repeat-x is used, vertical repetition is disabled.

3. Final Answer:

   Background image repeats only horizontally -> Option A

4. Quick Check:

   bg-repeat-x = horizontal repeat only [OK]

Hint: bg-repeat-x repeats horizontally only [OK]

Common Mistakes:

• Thinking bg-repeat-x repeats vertically
• Assuming bg-repeat-x repeats both directions
• Confusing bg-repeat-x with bg-no-repeat

4. You want a background image to repeat vertically only, but your code uses bg-repeat-x. What is the fix?

medium

A. Use bg-repeat instead

B. Add bg-no-repeat alongside bg-repeat-x

C. Remove all repeat classes

D. Change bg-repeat-x to bg-repeat-y

Solution

1. Step 1: Identify the wrong class

   bg-repeat-x repeats horizontally, but vertical repeat is needed.

2. Step 2: Replace with correct class

   bg-repeat-y repeats the background image vertically only.

3. Final Answer:

   Change bg-repeat-x to bg-repeat-y -> Option D

4. Quick Check:

   Vertical repeat = bg-repeat-y [OK]

Hint: Vertical repeat uses bg-repeat-y class [OK]

Common Mistakes:

• Adding bg-no-repeat with bg-repeat-x causing conflicts
• Removing repeat classes disables repetition
• Using bg-repeat repeats both directions, not vertical only

5. You want a background image to repeat horizontally but only twice across a wide container. Which Tailwind CSS approach helps achieve this?

hard

A. Use bg-repeat-y and set background-size to 50% height

B. Use bg-repeat-x and set background-size to 50% width

C. Use bg-repeat with bg-no-repeat together

D. Use bg-no-repeat and add multiple images manually

Solution

1. Step 1: Choose horizontal repeat

   bg-repeat-x repeats the background image horizontally.

2. Step 2: Control repeat count with background size

   Setting background-size to 50% width means the image covers half the container width, so it repeats twice horizontally.

3. Final Answer:

   Use bg-repeat-x and set background-size to 50% width -> Option B

4. Quick Check:

   Repeat count controlled by background-size + bg-repeat-x [OK]

Hint: Control repeats with bg-repeat-x + background-size [OK]

Common Mistakes:

• Using bg-repeat-y for horizontal repeat
• Combining bg-repeat and bg-no-repeat causing conflicts
• Trying to repeat twice without adjusting background-size