Background image in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a background image for the body element.

CSS

body {
  background-image: [1];
}

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

Aurl('background.jpg')

Bcolor: blue

Cfont-size: 16px

Dborder: 1px solid black

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to use url() around the image path.

Using color or other unrelated properties as the value.

The background-image property requires a url() value to set an image as the background.

2fill in blank

medium

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

CSS

div {
  background-image: url('photo.png');
  background-size: [1];
}

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

Aauto

Bcover

Ccontain

Drepeat

Attempts:

3 left

💡 Hint

Common Mistakes

Using repeat which tiles the image instead of scaling.

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

The background-size: cover; makes the image cover the entire element area, cropping if needed.

3fill in blank

hard

Fix the error in the code to correctly set a background image that does not repeat.

CSS

.header {
  background-image: url('header.jpg');
  background-repeat: [1];
}

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

Arepeat-y

Brepeat-x

Cno-repeat

Drepeat

Attempts:

3 left

💡 Hint

Common Mistakes

Using repeat which repeats the image.

Using repeat-x or repeat-y which repeat only horizontally or vertically.

To prevent the background image from repeating, use background-repeat: no-repeat;.

4fill in blank

hard

Fill both blanks to set a background image that is centered and fixed when scrolling.

CSS

section {
  background-image: url('pattern.png');
  background-position: [1];
  background-attachment: [2];
}

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

Acenter

Bfixed

Ctop left

Dscroll

Attempts:

3 left

💡 Hint

Common Mistakes

Using scroll which makes the background move with the page.

Using top left which places the image at the top left corner.

background-position: center; centers the image.
background-attachment: fixed; keeps the image fixed when scrolling.

5fill in blank

hard

Fill all three blanks to create a background image that covers the element, does not repeat, and is fixed.

CSS

.banner {
  background-image: url('banner.jpg');
  background-size: [1];
  background-repeat: [2];
  background-attachment: [3];
}

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

Acontain

Bno-repeat

Cfixed

Dcover

Attempts:

3 left

💡 Hint

Common Mistakes

Using contain which may leave empty space.

Forgetting to set no-repeat causing the image to tile.

Using scroll instead of fixed.

background-size: cover; scales the image to cover the element.
background-repeat: no-repeat; stops tiling.
background-attachment: fixed; keeps the image fixed during scroll.