Backgrounds

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which property is a shorthand that can set color, image, and repeat values all at once?

A background

B background-style

2. How should a background image file path be specified inside CSS?

A src('image.jpg')

B url('image.jpg')

3. Which value ensures a background image stretches proportionally to completely fill its container?

A cover

B contain

4. Does a background-color render underneath or on top of a background-image?

A On top of the image

B Underneath the image

5. What is the default behavior of a background image if it is smaller than its container element?

A It repeats to tile the container

B It stretches automatically

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1.box { background-repeat: no-repeat; }		APassing a naked string to background-image instead of wrapping the file path inside url().
2.banner { background-size: contain; }		BScales the image proportionally to ensure the entire image fits inside the element.
3Sets a background color using a semi-transparent alpha channel value.		CDisplays the background image exactly once without any tiling or replication.
4Positions a background image to sit exactly in the middle of its bounding layout block.		DUsing the imaginary value cover-all instead of the standard responsive value cover.
5.alert { background-image: 'bg.png'; }		E.card { background-position: center; }
6.hero { background-size: cover-all; }		F.item { background-color: rgba(0,0,0,0.5); }

Definitions

background

Fill in the Blanks

Complete each line of code by filling in the missing parts.

.box { ________________: red; }

.card { ________________: url('img.png'); }

.hero { background-repeat: _________; }

.header { background-size: _____; }

.main { ___________________: center; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A .banner {

B background-image: 'bg.jpg';

C background-color: blue;

D }

Question 2

A .section {

B background-color: #fff;

C background-repeat: repeat-yes;

D }

Question 3

A .main: {

B background: url('pattern.png') repeat-x;

C padding: 20px;

D }

Question 4

A .header {

B background-size: cover-all;

C background-position: center;

D }

Question 5

A .card {

B background-color: transparent;

C background-positioning: top left;

D }

Answer Key

Backgrounds

Section A: Quick Questions

A — background

B — url('image.jpg')

A — cover

B — Underneath the image

A — It repeats to tile the container

Section B: Match the Pairs

.box { background-repeat: no-repeat; } → Displays the background image exactly once without any tiling or replication.

.banner { background-size: contain; } → Scales the image proportionally to ensure the entire image fits inside the element.

Sets a background color using a semi-transparent alpha channel value. → .item { background-color: rgba(0,0,0,0.5); }

Positions a background image to sit exactly in the middle of its bounding layout block. → .card { background-position: center; }

.alert { background-image: 'bg.png'; } → Passing a naked string to background-image instead of wrapping the file path inside url().

.hero { background-size: cover-all; } → Using the imaginary value cover-all instead of the standard responsive value cover.

Section C: Definitions

background — Shorthand property to set all background style properties like color, image, position, and repeat in a single declaration.

Section D: Fill in the Blanks

.box {
  background-color: red;
}

.card {
  background-image: url('img.png');
}

.hero {
  background-repeat: no-repeat;
}

.header {
  background-size: cover;
}

.main {
  background-position: center;
}

Section E: Spot the Error

B — Line 1 is incorrect because background-image values must be wrapped inside a url() function, not as a raw string.

C — Line 2 is incorrect because repeat-yes is invalid. Use repeat, no-repeat, repeat-x, or repeat-y.

A — Line 0 has invalid syntax; remove the colon following the class name '.main'.

B — Line 1 is incorrect. cover-all is invalid; use cover to scale the image proportionally.

C — Line 2 is incorrect. The property name is background-position, not background-positioning.