Bird
Raised Fist0
CSSmarkup~20 mins

Background size in CSS - Mini Project: Build & Apply

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
Background Size with CSS
📖 Scenario: You are creating a simple webpage section that shows a background image. You want to control how the background image fits inside the section.
🎯 Goal: Build a webpage section with a background image and use CSS background-size property to control how the image fits inside the section.
📋 What You'll Learn
Create an HTML <section> with a class hero.
Add a background image to the .hero section using CSS.
Create a CSS variable called --bgSize to store the background size value.
Use the CSS variable --bgSize to set the background-size property.
Set the background-repeat property to no-repeat.
Set the background-position property to center.
Make sure the section has a fixed height so the background image is visible.
💡 Why This Matters
🌍 Real World
Background images are common in website headers, banners, and sections to create visual interest and branding.
💼 Career
Knowing how to control background images with CSS is essential for front-end web developers and designers to create attractive and responsive layouts.
Progress0 / 4 steps
1
Create the HTML section with class hero
Create an HTML <section> element with the class hero. Inside it, add a heading <h1> with the text Welcome to Our Site.
CSS
Hint

Use a <section> tag with class="hero" and add a heading inside.

2
Add a CSS variable --bgSize with value cover
In the CSS, create a rule for the .hero class. Inside it, add a CSS variable called --bgSize and set it to the value cover.
CSS
Hint

Use --bgSize: cover; inside the .hero CSS rule.

3
Add background image and use the CSS variable for background-size
In the .hero CSS rule, add a background-image property with the URL https://via.placeholder.com/600x400. Then set background-size to use the CSS variable var(--bgSize). Also add background-repeat: no-repeat; and background-position: center;.
CSS
Hint

Use background-image: url('https://via.placeholder.com/600x400'); and background-size: var(--bgSize); plus the other properties.

4
Set a fixed height for the .hero section
Add a CSS property height to the .hero class and set it to 20rem so the background image area is visible.
CSS
Hint

Use height: 20rem; to give the section a visible height.

Practice

(1/5)
1. What does the CSS property background-size: cover; do to a background image?
easy
A. It repeats the image to cover the element area.
B. It stretches the image to fit the element exactly without cropping.
C. It makes the background image fill the entire element, cropping if needed.
D. It fits the whole image inside the element without cropping.

Solution

  1. Step 1: Understand cover behavior

    cover scales the background image to fill the entire element area, even if some parts get cropped.

  2. Step 2: Compare with other options

    contain fits the whole image inside without cropping, and repeating is controlled by background-repeat.

  3. Final Answer:

    It makes the background image fill the entire element, cropping if needed. -> Option C

  4. Quick Check:

    cover = fills and crops [OK]
Hint: Remember: cover fills and crops, contain fits fully [OK]
Common Mistakes:
  • Confusing cover with contain
  • Thinking cover repeats the image
  • Assuming cover never crops
2. Which of the following is the correct CSS syntax to make a background image fit inside an element without cropping?
easy
A. background-size: contain;
B. background-size: cover;
C. background-size: fill;
D. background-size: stretch;

Solution

  1. Step 1: Identify the property value for fitting without cropping

    contain scales the image to fit inside the element fully without cropping.

  2. Step 2: Check other options for correctness

    cover crops, fill and stretch are invalid values for background-size.

  3. Final Answer:

    background-size: contain; -> Option A

  4. Quick Check:

    contain fits fully without crop [OK]
Hint: Use contain to fit fully, cover to fill and crop [OK]
Common Mistakes:
  • Using invalid values like fill or stretch
  • Mixing up cover and contain
  • Forgetting semicolon in syntax
3. Given this CSS: 
div {
  width: 200px;
  height: 100px;
  background-image: url('flower.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
What will the background image look like inside the div?
medium
A. The image will fill the div completely, cropping parts if needed.
B. The whole image will fit inside the div, centered, with possible empty space.
C. The image will repeat to fill the div area.
D. The image will stretch to exactly 200px by 100px, ignoring aspect ratio.

Solution

  1. Step 1: Analyze background-size: contain; effect

    This makes the entire image fit inside the div without cropping, preserving aspect ratio.

  2. Step 2: Consider other properties

    background-repeat: no-repeat; prevents tiling, and background-position: center; centers the image. So empty space may appear if aspect ratios differ.

  3. Final Answer:

    The whole image will fit inside the div, centered, with possible empty space. -> Option B

  4. Quick Check:

    contain fits fully, no repeat, centered [OK]
Hint: Contain fits whole image, no repeat means no tiling [OK]
Common Mistakes:
  • Assuming contain crops the image
  • Thinking image repeats by default
  • Confusing stretch with contain
4. This CSS code is intended to make a background image fill the element without repeating, but it doesn't work as expected: 
div {
  background-image: url('tree.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
}
What is the problem?
medium
A. background-size: 100%; only sets width, height is auto, so it may not fill the entire element.
B. The URL is missing quotes around the image path.
C. background-repeat must be set to repeat-x to fill horizontally.
D. The property background-size does not accept percentages.

Solution

  1. Step 1: Understand background-size: 100%; meaning

    Setting only one value means width is 100% of element, height auto to keep aspect ratio, so it may not fill the entire element.

  2. Step 2: Check other options

    URL quotes are optional but recommended, background-repeat: no-repeat; disables tiling correctly, and background-size accepts percentages.

  3. Final Answer:

    background-size: 100%; only sets width, height is auto, so it may not fill the entire element. -> Option A

  4. Quick Check:

    One value sets width only, height auto [OK]
Hint: Two values needed to set both width and height [OK]
Common Mistakes:
  • Using one value thinking it sets both width and height
  • Ignoring aspect ratio effects
  • Misunderstanding background-repeat options
5. You want a background image to always cover the entire element area on all screen sizes, but never be cropped. Which CSS approach is best?
hard
A. Use background-size: contain; and background-repeat: no-repeat;.
B. Use background-size: cover; and background-position: center;.
C. Use background-size: auto; and background-repeat: repeat;.
D. Use background-size: 100% 100%; to stretch image exactly.

Solution

  1. Step 1: Understand the requirement

    The image must always fill the entire element area (no empty space) on all screen sizes without cropping (whole image visible).

  2. Step 2: Evaluate options

    contain fits whole image but may leave empty space; cover fills but crops; 100% 100% stretches whole image to exactly fill without cropping or space; auto repeat tiles.

  3. Final Answer:

    Use background-size: 100% 100%; to stretch image exactly. -> Option D

  4. Quick Check:

    100% 100% fills exactly, no crop [OK]
Hint: 100% 100% stretches to fill exactly, no crop or space [OK]
Common Mistakes:
  • Choosing cover which crops
  • Choosing contain which leaves space
  • Using repeat which tiles