Background repeat control in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the background image repeat horizontally only.

Tailwind

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

Drag options to blanks, or click blank then click option'

Abg-no-repeat

Bbg-repeat-y

Cbg-repeat-x

Dbg-repeat

Attempts:

3 left

💡 Hint

Common Mistakes

Using bg-repeat-y which repeats vertically.

Using bg-no-repeat which disables repeating.

The class bg-repeat-x makes the background image repeat only horizontally.

2fill in blank

medium

Complete the code to prevent the background image from repeating.

Tailwind

<section class="bg-[url('/img/texture.svg')] [1] h-48 w-full"></section>

Drag options to blanks, or click blank then click option'

Abg-repeat-y

Bbg-repeat

Cbg-repeat-x

Dbg-no-repeat

Attempts:

3 left

💡 Hint

Common Mistakes

Using bg-repeat which repeats in both directions.

Using bg-repeat-x or bg-repeat-y which repeat only in one direction.

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

3fill in blank

hard

Fix the error in the class to make the background repeat vertically only.

Tailwind

<div class="bg-[url('/img/stripes.png')] [1] h-32 w-full"></div>

Drag options to blanks, or click blank then click option'

Abg-repeat-y

Bbg-no-repeat

Cbg-repeat-x

Dbg-repeat

Attempts:

3 left

💡 Hint

Common Mistakes

Using bg-repeat-x which repeats horizontally.

Using bg-no-repeat which disables repeating.

The class bg-repeat-y makes the background repeat vertically only.

4fill in blank

hard

Fill both blanks to make the background image repeat in both directions and cover the entire element.

Tailwind

<section class="bg-[url('/img/grid.svg')] [1] [2] h-64 w-full"></section>

Drag options to blanks, or click blank then click option'

Abg-repeat

Bbg-cover

Cbg-no-repeat

Dbg-contain

Attempts:

3 left

💡 Hint

Common Mistakes

Using bg-no-repeat which stops repeating.

Using bg-contain which fits the image inside without cropping.

bg-repeat makes the background repeat in both directions, and bg-cover makes it cover the entire element.

5fill in blank

hard

Fill all three blanks to make the background image repeat horizontally, not repeat vertically, and scale to fit inside the element.

Tailwind

<div class="bg-[url('/img/dots.png')] [1] [2] [3] h-48 w-full"></div>

Drag options to blanks, or click blank then click option'

Abg-repeat-x

Bbg-no-repeat

Cbg-contain

Dbg-cover

Attempts:

3 left

💡 Hint

Common Mistakes

Using bg-repeat-y instead of bg-repeat-x.

Using bg-cover instead of bg-contain.

bg-repeat-x repeats the background horizontally, bg-no-repeat prevents vertical repeating, and bg-contain scales the image to fit inside the element.

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