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.