Bird
Raised Fist0
CSSmarkup~5 mins

Background size in CSS

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
Introduction
Background size controls how a background image fits inside an element. It helps make images look good on different screen sizes.
You want a background image to cover the entire area without stretching weirdly.
You want a background image to fit inside an element without cutting off parts.
You want to repeat a small background image in a pattern.
You want to set a specific size for a background image, like 100 pixels wide.
You want the background image to keep its original size.
Syntax
CSS
background-size: <length> | <percentage> | cover | contain | auto;
cover makes the image fill the area, cropping if needed.
contain makes the whole image visible, adding space if needed.
Examples
The background image fills the entire element, cropping parts if needed.
CSS
background-size: cover;
The background image fits inside the element without cropping, may leave empty space.
CSS
background-size: contain;
The background image is exactly 100 pixels wide and 50 pixels tall.
CSS
background-size: 100px 50px;
The background image keeps its original size.
CSS
background-size: auto;
Sample Program
This page shows four boxes with the same background image but different background sizes. Each box demonstrates how the image changes shape and size depending on the background-size property.
CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Background Size Example</title>
  <style>
    .box {
      width: 20rem;
      height: 12rem;
      border: 2px solid #333;
      margin: 1rem;
      background-image: url('https://via.placeholder.com/300x150');
      background-repeat: no-repeat;
      background-position: center;
      display: inline-block;
      vertical-align: top;
    }
    .cover {
      background-size: cover;
    }
    .contain {
      background-size: contain;
    }
    .fixed-size {
      background-size: 100px 50px;
    }
    .auto {
      background-size: auto;
    }
  </style>
</head>
<body>
  <h1>Background Size Examples</h1>
  <section>
    <article class="box cover" aria-label="Background size cover">
      <strong>cover</strong>
    </article>
    <article class="box contain" aria-label="Background size contain">
      <strong>contain</strong>
    </article>
    <article class="box fixed-size" aria-label="Background size 100px by 50px">
      <strong>100px 50px</strong>
    </article>
    <article class="box auto" aria-label="Background size auto">
      <strong>auto</strong>
    </article>
  </section>
</body>
</html>
OutputSuccess
Important Notes
Use background-repeat: no-repeat; to avoid repeating the image when using background-size.
The cover option is great for full-screen backgrounds.
The contain option is useful when you want the whole image visible without cropping.
Summary
Background size controls how a background image fits inside an element.
cover fills the area, possibly cropping the image.
contain fits the whole image inside, possibly leaving space.

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