Background repeat in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

CSS

background-image: url('pattern.png');
background-repeat: [1];

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

Ano-repeat

Bspace

Crepeat-y

Drepeat-x

Attempts:

3 left

💡 Hint

Common Mistakes

Using repeat-y which repeats vertically.

Using no-repeat which stops repetition.

The repeat-x value makes the background image repeat only horizontally.

2fill in blank

medium

Complete the code to prevent the background image from repeating.

CSS

background-image: url('texture.jpg');
background-repeat: [1];

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

Ano-repeat

Brepeat

Crepeat-x

Dround

Attempts:

3 left

💡 Hint

Common Mistakes

Using repeat which repeats the image both horizontally and vertically.

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

The no-repeat value stops the background image from repeating.

3fill in blank

hard

Fix the error in the code to make the background image repeat vertically only.

CSS

background-image: url('dots.png');
background-repeat: [1];

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

Arepeat-x

Bno-repeat

Crepeat-y

Drepeat

Attempts:

3 left

💡 Hint

Common Mistakes

Using repeat-x which repeats horizontally.

Using no-repeat which stops repetition.

The repeat-y value repeats the background image vertically only.

4fill in blank

hard

Fill both blanks to make the background image repeat only horizontally and position it at the top right.

CSS

background-image: url('stripe.png');
background-repeat: [1];
background-position: [2];

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

Arepeat-x

Brepeat-y

Ctop right

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using repeat-y instead of repeat-x.

Using center instead of top right.

repeat-x repeats the image horizontally, and top right places it at the top right corner.

5fill in blank

hard

Fill all three blanks to make the background image repeat vertically, positioned at the bottom left, and sized to cover the entire element.

CSS

background-image: url('grid.png');
background-repeat: [1];
background-position: [2];
background-size: [3];

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

Arepeat-x

Brepeat-y

Cbottom left

Dcover

Attempts:

3 left

💡 Hint

Common Mistakes

Using repeat-x instead of repeat-y.

Using top right instead of bottom left.

Using contain instead of cover.

repeat-y repeats the image vertically, bottom left positions it there, and cover scales the image to cover the element.