ReviseAlgo Logo

CSS Basics

Background

Master CSS background properties, covering background-color, background-image, repeat options, position coordinates, and cover vs contain sizing rules.

Last Updated: July 15, 2026 • 10 min read

1. Learning Objectives

In this lesson, you will master configuring element backgrounds. By the end of this topic, you will be able to:

  • Apply background colors and load external background images.
  • Manage image tiling using the background-repeat property.
  • Control background image sizing using cover and contain values.
  • Position background images using keyword and percentage coordinates.
  • Write optimized shorthand background declarations.

2. Overview

The background properties in CSS allow you to customize the background of an element. This includes setting solid colors, linear/radial gradients, and loading external images. Additional properties control image size, repetition, attachment, and positioning within the element's boundaries.

3. Why This Topic Matters

Background configurations impact readability, performance, and visual appeal:

  • Legibility Pitfalls: Loading a dark background image on a container with dark text makes the content unreadable if the image fails to load. You must define a fallback background color to keep the text readable in case of asset load failures.
  • Slow Page Speeds: Using massive, uncompressed high-resolution background images increases initial page weight, resulting in slow load times.

4. Real-World Analogy

Think of configuring element backgrounds like **decorating a gallery wall**:

  • Background Color (Wall Paint): Painting the gallery wall a solid color before hanging anything on it. If the artwork is delayed, the wall still looks finished.
  • Background Image (Wallpaper): Hanging a pattern roll of wallpaper on the wall.
  • Background Repeat (Pattern Tiling): Deciding whether to tile the wallpaper pattern repeatedly across the wall (repeat) or hang a single large mural in the center (no-repeat).
  • Background Size (Sizing):
    • Cover: Stretching the mural to cover the entire wall. Some parts of the image might get cut off at the top or sides.
    • Contain: Fitting the entire mural on the wall so that the whole image is visible. This can leave empty wall space on the sides.

5. Core Concepts

Background Sizing Scaling Method Visual Layout Result
cover Stretches the image to fill the container completely, maintaining its aspect ratio. Image is cropped if its aspect ratio differs from the container.
contain Scales the image to fit entirely inside the container, maintaining its aspect ratio. No clipping occurs, but leaves empty space on the sides or top/bottom.

6. Syntax & API Reference

Below are the individual property declarations and the corresponding shorthand syntax:

7. Visual Diagram

This diagram displays the scaling differences between cover and contain sizing:

8. Live Example — Full Working Code

A sample HTML document showing background colors, patterns, and gradients:

9. Interactive Playground

Try It Yourself Challenges:

  1. Change the background-size of the main hero banner container from cover to contain and observe how the image fits within the box.
  2. Test how combining a linear gradient background with a background image works (e.g. background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(...)).

10. Common Mistakes

Mistake Why it happens Wrong Correct
Missing fallback color Failing to declare a background-color, making overlay text unreadable if the image fails to load. background-image: url("dark.jpg"); color: white; background-color: black;
background-image: url("dark.jpg");
color: white;
Mismatched shorthand values Writing size parameters inside shorthand syntax without using a separating slash (/). background: url(...) no-repeat center cover; background: url(...) no-repeat center / cover;

11. Best Practices

  • Always define a fallback color: When using a background image, always declare a matching background-color to keep overlay text readable in case the image fails to load.
  • Use cover for full-width banners: Set background-size: cover on hero blocks to ensure the background image scales smoothly on all device widths.
  • Compress background images: Optimize background image file sizes (using formats like WebP or AVIF) to keep page load speeds fast.
  • Use no-repeat for single banners: Set background-repeat: no-repeat on hero banners to prevent the image from tiling on wide desktop screens.

12. Browser Compatibility

Feature Chrome Firefox Safari Edge
background-size: cover / contain Supported (3+) Supported (4+) Supported (4.1+) Supported (12+)

13. Interview Questions

🟢 Q1: What is the differences between background-size: cover and background-size: contain?

Answer: cover stretches the image to completely fill the container's width and height. If the image and container have different aspect ratios, the image is cropped. contain scales the image to fit entirely inside the container without cropping, which can leave empty spaces on the sides or top/bottom.

14. Debugging Exercise

Identify and fix the shorthand syntax error in this style block:

View Solution

Diagnosis: Inside CSS background shorthand declarations, you must separate the position and size properties with a slash (/) (e.g. position / size). If you omit the slash, the browser will ignore the entire shorthand rule.

Fixed CSS:

15. Practice Exercises

Exercise 1: Profile Header Card

Build a dashboard header block. Set a background color, load an external background image set to cover, position it in the center, and ensure it does not repeat.

16. Scenario-Based Challenge

The Dark Image Contrast readability Challenge:

Your product landing page features a large background image with white heading text layered on top. In some screen widths, bright spots in the image make the white text unreadable. Propose a styling solution using CSS gradients to add a subtle dark overlay on the background image.

17. Quick Quiz

Q1: Which character must separate background position and size inside shorthand styling?

A) comma (,)

B) slash (/)

C) space ( )

Answer: B — You must use a slash (/) to separate position and size values in background shorthand syntax.

18. Summary & Key Takeaways

  • • Always define a fallback background color to support slow network loading scenarios.
  • • Separate background position and size with a slash (/) when using background shorthand.

19. Cheat Sheet

Value Visual Layout Action
background-size: cover; Stretches the background image to completely cover the container, cropping excess margins.