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.

Practice

1. What does the CSS property background-image do on a webpage?

easy

A. It adds a picture behind the content of an element.

B. It changes the text color of an element.

C. It sets the size of the webpage.

D. It removes all images from the page.

Solution

1. Step 1: Understand the purpose of background-image

   This property is used to place an image behind the content inside an element, like a background picture.

2. Step 2: Compare with other options

   Changing text color or page size is done by other CSS properties, not background-image.

3. Final Answer:

   It adds a picture behind the content of an element. -> Option A

4. Quick Check:

   Background image = picture behind content [OK]

Hint: Background image means picture behind content [OK]

Common Mistakes:

• Confusing background-image with text color
• Thinking it changes page size
• Assuming it removes images

2. Which of the following is the correct CSS syntax to set a background image from a file named photo.jpg?

easy

A. background-image: url('photo.jpg');

B. background-image = url('photo.jpg');

C. background-image: 'photo.jpg';

D. background-image(url='photo.jpg');

Solution

1. Step 1: Recall correct CSS property syntax

   CSS properties use a colon : to assign values, not an equals sign or parentheses.

2. Step 2: Check the value format for background-image

   The value must be url('filename') with parentheses and quotes around the filename.

3. Final Answer:

   background-image: url('photo.jpg'); -> Option A

4. Quick Check:

   Correct CSS uses colon and url() [OK]

Hint: Use colon and url('filename') for background-image [OK]

Common Mistakes:

• Using equals sign instead of colon
• Omitting url() function
• Using parentheses incorrectly

3. What will be the visual result of this CSS on a <div>?

div {
  background-image: url('tree.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

medium

A. A 200x200 box with the tree.png image stretched to fill the box ignoring aspect ratio.

B. A 200x200 box with the tree.png image repeated to fill the box.

C. A 200x200 box with no image visible because background-repeat is no-repeat.

D. A 200x200 box with the tree.png image centered and fully visible without repeating.

Solution

1. Step 1: Analyze background-repeat and background-position

   background-repeat: no-repeat means the image shows only once. background-position: center places it in the middle.

2. Step 2: Understand background-size: contain

   This scales the image to fit inside the box while keeping its shape, so it is fully visible.

3. Final Answer:

   A 200x200 box with the tree.png image centered and fully visible without repeating. -> Option D

4. Quick Check:

   no-repeat + center + contain = single centered image [OK]

Hint: no-repeat + center + contain = one centered image fully visible [OK]

Common Mistakes:

• Thinking no-repeat hides the image
• Assuming image repeats anyway
• Confusing contain with stretch

4. Identify the error in this CSS code that tries to set a background image:

body {
  background-image: url(tree.png);
  background-repeat: no-repeat
  background-position: center;
}

medium

A. background-position cannot be center.

B. Incorrect URL syntax in background-image.

C. Missing semicolon after background-repeat property.

D. background-repeat should be repeat, not no-repeat.

Solution

1. Step 1: Check each CSS property line

   background-repeat line is missing a semicolon at the end, which breaks CSS parsing.

2. Step 2: Verify other lines

   background-image URL syntax is correct without quotes (allowed but quotes recommended), background-position: center is valid, and no-repeat is a valid value.

3. Final Answer:

   Missing semicolon after background-repeat property. -> Option C

4. Quick Check:

   Every CSS property line needs a semicolon [OK]

Hint: Check for missing semicolons after each CSS property [OK]

Common Mistakes:

• Forgetting semicolon after properties
• Thinking URL needs quotes always
• Misunderstanding valid background-position values

5. You want a background image to cover the entire page, keep its aspect ratio, and stay fixed when scrolling. Which CSS properties and values should you use together?

hard

A. background-image: url('bg.jpg'); background-repeat: repeat; background-position: top left;

B. background-image: url('bg.jpg'); background-size: cover; background-attachment: fixed;

C. background-image: url('bg.jpg'); background-size: contain; background-attachment: scroll;

D. background-image: url('bg.jpg'); background-size: 100% 100%; background-attachment: fixed;

Solution

1. Step 1: Understand background-size: cover

   This makes the image fill the entire area while keeping its shape, cropping if needed.

2. Step 2: Use background-attachment: fixed

   This keeps the background image fixed in place when the user scrolls the page.

3. Step 3: Check other options

   background-image: url('bg.jpg'); background-repeat: repeat; background-position: top left; repeats the image and positions top left, not covering entire page. background-image: url('bg.jpg'); background-size: contain; background-attachment: scroll; uses contain which may leave empty space. background-image: url('bg.jpg'); background-size: 100% 100%; background-attachment: fixed; stretches image ignoring aspect ratio.

4. Final Answer:

   background-image: url('bg.jpg'); background-size: cover; background-attachment: fixed; -> Option B

5. Quick Check:

   cover + fixed = full page image stays on scroll [OK]

Hint: Use cover for full area and fixed to lock image on scroll [OK]

Common Mistakes:

• Using contain instead of cover for full coverage
• Forgetting background-attachment fixed for fixed image
• Stretching image and losing aspect ratio