Bird
Raised Fist0
CSSmarkup~20 mins

Background image in CSS - Practice Problems & Coding Challenges

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Challenge - 5 Problems
🎖️
Background Image Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ rendering
intermediate
2:00remaining
What is the visible background color when this CSS is applied?
Given the CSS below, what color will you see as the background of the <body> element if the image URL is invalid or missing?
CSS
body {
  background-image: url('nonexistent.jpg');
  background-color: #ffcc00;
}
AThe background will be yellow (#ffcc00) because the image fails to load.
BThe background will be white because the image is missing.
CThe background will be transparent showing the default browser background.
DThe background will be black because the image URL is invalid.
Attempts:
2 left
💡 Hint
Think about what happens when a background image cannot load but a background color is set.
❓ selector
intermediate
2:00remaining
Which CSS selector applies the background image only to <section> elements with class 'hero'?
Choose the CSS selector that correctly applies a background image only to <section> elements that have the class 'hero'.
A#hero section { background-image: url('hero.jpg'); }
Bsection.hero { background-image: url('hero.jpg'); }
Csection .hero { background-image: url('hero.jpg'); }
D.hero section { background-image: url('hero.jpg'); }
Attempts:
2 left
💡 Hint
Remember that the class selector comes immediately after the element name with no space to target that element with the class.
🧠 Conceptual
advanced
2:00remaining
What does the CSS property 'background-size: cover;' do?
Select the correct description of what 'background-size: cover;' does to a background image.
AIt scales the background image to cover the entire container while maintaining aspect ratio, cropping if needed.
BIt stretches the background image to fill the container, possibly distorting it.
CIt repeats the background image to fill the container.
DIt sets the background image size to its original dimensions.
Attempts:
2 left
💡 Hint
Think about how the image fits inside the container without distortion.
❓ accessibility
advanced
2:00remaining
Which practice improves accessibility when using background images for important content?
When a background image contains important information, which approach improves accessibility for screen readers?
AUse CSS background-image only and rely on visual users to see the content.
BUse background images with no fallback text because images are decorative.
CAdd descriptive text in HTML with ARIA labels or hidden text to convey the same information.
DUse background images with low contrast to avoid distracting users.
Attempts:
2 left
💡 Hint
Think about how screen readers access content and what they can read.
📝 Syntax
expert
2:00remaining
What error does this CSS code cause?
Consider the CSS below. What error or issue will occur when the browser tries to apply it?
CSS
div {
  background-image: url('image.png') no-repeat center center;
}
AThe browser will ignore the entire rule because of missing semicolon after url().
BNo error; the background image will display centered and not repeat.
CThe image will repeat because 'no-repeat' is ignored in 'background-image'.
DSyntax error because 'background-image' cannot have multiple values like 'no-repeat' and 'center'.
Attempts:
2 left
💡 Hint
Check which CSS property accepts multiple values and which does not.

Practice

(1/5)
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