Background size in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the background image cover the entire element.

CSS

background-size: [1];

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

Arepeat

Bcontain

Cauto

Dcover

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'contain' which fits the image inside but may leave empty space.

Using 'repeat' which repeats the image instead of resizing.

The cover value makes the background image cover the entire element, scaling it as needed.

2fill in blank

medium

Complete the code to make the background image fit inside the element without cropping.

CSS

background-size: [1];

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

Aauto

Bcover

Ccontain

Dinitial

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'cover' which crops the image to fill the element.

Using 'auto' which keeps the original size.

The contain value scales the background image to fit inside the element without cropping.

3fill in blank

hard

Fix the error in the code to set the background size to half the element's width and height.

CSS

background-size: [1];

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

Aauto

B50%

C50px

Dcover

Attempts:

3 left

💡 Hint

Common Mistakes

Using '50px' which sets a fixed size instead of relative.

Using 'auto' which keeps the original size.

Using 50% sets the background size to half the width and height of the element.

4fill in blank

hard

Fill both blanks to set the background size to 100 pixels wide and 50 pixels tall.

CSS

background-size: [1] [2];

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

A100px

B50%

C50px

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using percentages instead of pixels for fixed size.

Using 'auto' which keeps original size.

The first value sets the width to 100 pixels, and the second sets the height to 50 pixels.

5fill in blank

hard

Fill all three blanks to set the background size to 80% width, 40% height, and ensure the image does not repeat.

CSS

background-size: [1] [2]; background-repeat: [3];

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

A80%

B40%

Cno-repeat

Drepeat

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'repeat' which causes the image to tile.

Using pixel units instead of percentages.

The background size is set to 80% width and 40% height, and no-repeat stops the image from repeating.