Background position in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the background image position to the top left corner.

CSS

background-position: [1];

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

Arepeat

Bcenter

Cbottom right

Dtop left

Attempts:

3 left

💡 Hint

Common Mistakes

Using repeat which is for background-repeat, not position.

Using only one keyword like top without the horizontal position.

The background-position property sets the starting position of a background image. top left places it at the top left corner.

2fill in blank

medium

Complete the code to center the background image horizontally and vertically.

CSS

background-position: [1];

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

Abottom left

Btop right

Ccenter center

Dleft center

Attempts:

3 left

💡 Hint

Common Mistakes

Using only one center which defaults the other axis to top or left.

Confusing background-position with background-repeat.

Using center center places the background image exactly in the middle horizontally and vertically.

3fill in blank

hard

Fix the error in the code to correctly position the background image 20 pixels from the left and 10 pixels from the top.

CSS

background-position: [1];

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

A20px 10px

B10px 20px

Cleft 20px top 10px

D20px top 10px

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the pixel values order.

Mixing keywords and pixel values incorrectly.

The first value is the horizontal offset (left to right), so 20px is horizontal and 10px is vertical (top to bottom).

4fill in blank

hard

Fill both blanks to position the background image at the bottom right corner using keywords.

CSS

background-position: [1] [2];

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

Abottom

Bright

Ctop

Dleft

Attempts:

3 left

💡 Hint

Common Mistakes

Reversing the order of horizontal and vertical keywords.

Using top or left instead of right or bottom.

The background-position property accepts two values: horizontal then vertical. right bottom places the image at the bottom right corner.

5fill in blank

hard

Fill all three blanks to position the background image 15 pixels from the left, 25 pixels from the top, and prevent it from repeating.

CSS

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

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

A15px

B25px

Cno-repeat

Drepeat

Attempts:

3 left

💡 Hint

Common Mistakes

Using repeat instead of no-repeat.

Swapping the pixel values order.

The first two values set the horizontal and vertical position in pixels. The background-repeat property set to no-repeat stops the image from repeating.