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.