← HTML & CSS

Backgrounds

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

Part of: HTML and CSS Journey — Module 56

What it does: The rgba function sets Red, Green, Blue, and an Alpha transparency layer between 0 and 1. background-position: center automatically aligns the graphic vertically and horizontally. The background shorthand combines color, image, position, size, and repeat into a single line. CSS uses the url() function to point to image sources for backgrounds. cover fills the element completely, cropping if needed, while contain ensures the whole image is visible without cropping. Background colors are layered behind background images, serving as a fallback if the image fails to load. Setting background-repeat to no-repeat stops the default horizontal and vertical tiling behavior. The contain value guarantees that no parts of the background image are cut off or hidden.

Common mistakes: Line 1 is incorrect because background-image values must be wrapped inside a url() function, not as a raw string. Line 2 is incorrect because repeat-yes is invalid. Use repeat, no-repeat, repeat-x, or repeat-y.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of Backgrounds (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

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

backgroundbackground-style

Matches

.alert { background-image: 'bg.png'; }

↓

Passing a naked string to background-image instead of wrapping the file path inside url().

Applying

Meanings

Term

background

Meaning

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

Practice

.hero-banner {

Testing

Gaps

: red;

Check Answer

Spots

1.banner {

2 background-image: 'bg.jpg';

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

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

A. background ✓

B. background-style

The background shorthand combines color, image, position, size, and repeat into a single line.

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

A. url('image.jpg') ✓

B. src('image.jpg')

CSS uses the url() function to point to image sources for backgrounds.

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

A. contain

B. cover ✓

cover fills the element completely, cropping if needed, while contain ensures the whole image is visible without cropping.

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

A. Underneath the image ✓

B. On top of the image

Background colors are layered behind background images, serving as a fallback if the image fails to load.

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

By default, background-repeat is set to repeat, causing the image to tile horizontally and vertically.

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.

Key Term

background

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

Fill in the Blanks

1. .box { background-color: red; }

Hint: Type the property used to change the background color

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

Hint: Type the property used to add a background image

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

Hint: Type the value that prevents background images from repeating

4. .header { background-size: cover; }

Hint: Type the value that stretches a background image to fully cover the element

5. .main { background-position: center; }

Hint: Type the property used to align the background image position

Spot the Error

Question 1

A .banner {

B background-image: 'bg.jpg';

C background-color: blue;

D }

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

Question 2

A .section {

B background-color: #fff;

C background-repeat: repeat-yes;

D }

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

Question 3

A .main: {

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

C padding: 20px;

D }

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

Question 4

A .header {

B background-size: cover-all;

C background-position: center;

D }

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

Question 5

A .card {

B background-color: transparent;

C background-positioning: top left;

D }

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

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?