Background size in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS property background-size control?

It controls the size of the background image inside an element, letting you decide how big or small the image appears.

beginner

What does background-size: cover; do?

It makes the background image cover the entire element area, cropping parts if needed, so no empty space is visible.

intermediate

What is the difference between background-size: contain; and background-size: cover;?

contain fits the whole image inside the element without cropping, possibly leaving empty space. cover fills the element fully but may crop the image.

beginner

How can you set a background image to be exactly 100px wide and 50px tall?

Use background-size: 100px 50px; to set the width and height explicitly.

beginner

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

The background image keeps its original size without scaling.

Which background-size value makes the image fill the element completely, possibly cropping it?

A auto

B contain

C cover

D inherit

cover scales the image to fill the element fully, cropping if needed.

What does background-size: contain; do?

A Scales the image to fit inside the element without cropping

B Keeps the image original size

C Repeats the image to fill the element

D Scales the image to fill the element and crop if needed

contain fits the entire image inside the element without cropping.

How do you set a background image size to 50% width and 100% height of the element?

A background-size: auto;

B background-size: 100% 50%;

C background-size: cover;

D background-size: 50% 100%;

The first value is width, second is height, so 50% width and 100% height.

If you want the background image to keep its original size, which value should you use?

A cover

B auto

C contain

D 100% 100%

auto keeps the image at its original size.

Which CSS property controls the size of a background image?

A background-size

B background-repeat

C background-position

D background-color

background-size sets how big or small the background image is.

Explain how background-size: cover; and background-size: contain; behave differently.

Think about whether the image is cropped or fully visible.

Describe how to set a background image to a specific width and height using CSS.

Remember the syntax: background-size: width height;