Background repeat in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS property background-repeat control?

It controls how a background image repeats (or doesn't) inside an element's background area.

intermediate

Name the possible values for background-repeat.

• repeat: repeats image both horizontally and vertically.
• repeat-x: repeats image only horizontally.
• repeat-y: repeats image only vertically.
• no-repeat: no repetition, image shows once.
• space: repeats image with space between.
• round: repeats image scaled to fit without clipping.

beginner

What happens if you set background-repeat: no-repeat;?

The background image will appear only once and will not repeat horizontally or vertically.

beginner

How does background-repeat: repeat-x; behave?

The background image repeats only horizontally across the element's width, but not vertically.

advanced

Explain the difference between space and round values in background-repeat.

space repeats the image with equal space between each repetition without clipping.

round repeats the image scaled so it fits exactly without clipping or spacing.

Which background-repeat value repeats the image only vertically?

A repeat-y

B repeat-x

C no-repeat

D repeat

repeat-y repeats the background image only vertically.

What is the default value of background-repeat in CSS?

A repeat

B no-repeat

C repeat-x

D space

The default is repeat, which repeats the image both horizontally and vertically.

If you want a background image to appear only once, which value should you use?

A repeat

B repeat-x

C round

D no-repeat

no-repeat shows the image only once without repeating.

Which background-repeat value scales the image to fit without clipping?

A space

B round

C repeat-x

D no-repeat

round repeats the image scaled so it fits exactly without clipping.

What does background-repeat: space; do?

A Does not repeat image

B Repeats image only horizontally

C Repeats image with space between each repetition

D Repeats image scaled to fit

space repeats the image with equal space between each repetition.

Describe how the background-repeat property affects the display of a background image.

Think about how wallpaper patterns repeat on walls.

Explain the difference between the space and round values for background-repeat.

Imagine tiles spaced apart versus tiles resized to fit exactly.