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.