← 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

Understanding Backgrounds in HTML & CSS

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 class and your students practise it interactively.

🖨 Print worksheet + answer key Add Backgrounds to a class →

This module's key terms are also in a printable crossword (Modules 53–63) and word search (Modules 43–63).

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.

Add to 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. src('image.jpg')

B. url('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. cover ✓

B. contain

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. On top of the image

B. Underneath 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.

Student with a class code? Join your class →