Background size in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual result of this CSS?

Given the CSS below applied to a 200px by 200px div with a 100px by 100px background image, what will the background look like?

CSS

div {
  width: 200px;
  height: 200px;
  background-image: url('image.png');
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: center;
}

A The background image is stretched to fill the entire 200px by 200px div.

B The background image is scaled to 100px by 100px and centered inside the div.

C The background image is shown at its original size 100px by 100px at the top-left corner.

D The background image is tiled repeatedly to fill the div.

💡 Hint

Remember that 50% 50% means half the width and half the height of the container.

The background-size: 50% 50% scales the image to half the width and half the height of the div, which is 100px by 100px. The image is centered because of background-position: center and does not repeat.

📝 Syntax

intermediate

Which CSS rule correctly sets the background image to cover the entire element?

Choose the correct CSS background-size value to make the background image cover the entire element without distortion.

A background-size: cover;

B background-size: 100% 100%;

C background-size: contain;

D background-size: auto;

💡 Hint

One value makes the image cover the entire area, cropping if needed.

cover scales the background image to cover the entire element, cropping parts if necessary, while preserving aspect ratio.

❓ selector

advanced

Which CSS selector applies the background-size only to images inside a container with class hero?

You want to apply background-size: contain; only to img elements inside a container with class hero. Which selector is correct?

A #hero img { background-size: contain; }

B img.hero { background-size: contain; }

C hero img { background-size: contain; }

D .hero img { background-size: contain; }

💡 Hint

Remember that classes start with a dot and IDs with a hash.

.hero img selects all img elements inside any element with class hero. Option D selects img elements with class hero, which is different. Option D is invalid because hero is not a tag. Option D selects inside an element with ID hero, not class.

🧠 Conceptual

advanced

What happens if you set background-size: auto; on an element?

Choose the correct description of the effect of background-size: auto; on the background image.

A The background image keeps its original size.

B The background image stretches to fill the element.

C The background image scales to fit the element's width.

D The background image is hidden.

💡 Hint

Think about what 'auto' means in CSS sizing.

auto means the background image keeps its original size without scaling.

❓ accessibility

expert

How does improper use of background-size affect accessibility?

Which of the following is a potential accessibility issue caused by incorrect background-size usage?

A Background images with <code>background-size</code> cause screen readers to crash.

B Using <code>background-size</code> disables keyboard navigation.

C Background images scaled too small may make text unreadable if text overlays the image.

D Background images always improve accessibility regardless of size.

💡 Hint

Think about how background images interact with text visibility.

If a background image is scaled too small or too large, it can reduce contrast or clutter behind text, making it hard to read for users with visual impairments.

Practice

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