Background size and position in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the background size to cover the entire element.

Tailwind

<div class="bg-[url('/image.jpg')] [1] h-64 w-64"></div>

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

Abg-contain

Bbg-repeat

Cbg-cover

Dbg-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using bg-contain which fits the image but may leave empty space.

Using bg-repeat which repeats the image instead of resizing.

The bg-cover class makes the background image cover the entire element area.

2fill in blank

medium

Complete the code to center the background image inside the element.

Tailwind

<div class="bg-[url('/photo.png')] h-48 w-48 [1]"></div>

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

Abg-left

Bbg-top

Cbg-bottom

Dbg-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using bg-top or bg-bottom which align the image to edges.

Using bg-left which aligns the image to the left side.

The bg-center class centers the background image horizontally and vertically.

3fill in blank

hard

Fix the error in the code to make the background image not repeat.

Tailwind

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

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

Abg-repeat-x

Bbg-no-repeat

Cbg-repeat

Dbg-repeat-y

Attempts:

3 left

💡 Hint

Common Mistakes

Using bg-repeat which causes the image to repeat.

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

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

4fill in blank

hard

Fill both blanks to make the background image cover the element and position it at the top right.

Tailwind

<div class="bg-[url('/scenery.jpg')] [1] [2] h-72 w-72"></div>

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

Abg-cover

Bbg-center

Cbg-top-right

Dbg-no-repeat

Attempts:

3 left

💡 Hint

Common Mistakes

Using bg-center instead of bg-top-right for position.

Using bg-no-repeat which only controls repetition.

Use bg-cover to cover the element and bg-top-right to position the image at the top right corner.

5fill in blank

hard

Fill all three blanks to create a background image that is contained inside the element, positioned at bottom left, and does not repeat.

Tailwind

<div class="bg-[url('/texture.png')] [1] [2] [3] h-56 w-56"></div>

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

Abg-contain

Bbg-no-repeat

Cbg-bottom-left

Dbg-cover

Attempts:

3 left

💡 Hint

Common Mistakes

Using bg-cover instead of bg-contain which may crop the image.

Using bg-repeat which causes the image to repeat.

Using bg-center instead of bg-bottom-left for position.

Use bg-contain to fit the image inside, bg-bottom-left to position it at the bottom left, and bg-no-repeat to prevent repeating.