Course Index

CSS · Module 16 · Lesson 14 of 48

Background Colors & Images

What are Background Layers?

Imagine designing a poster board. You can paint the entire board a solid color (Background Color), paste a large photo covering the board (Background Image), or tile a small stamp print repeatedly to create a background pattern (Background Repeat).

In CSS, the background properties style the backing layers of elements behind the text content:

  • background-color: Sets a solid color.
  • background-image: Places an image using a URL file path: url('image.jpg').
  • background-repeat: Controls whether the image tiles/repeats if it is smaller than the element. Common options are repeat (default), no-repeat, repeat-x, repeat-y.
  • background-size: Controls image scale. E.g., cover forces the image to fill the entire container without warping.

    • Why does it matter?

    Backgrounds structure visual headers, call-to-action banners, and cards. Using background-size: cover; is a standard technique for hero banners, ensuring background photos look beautiful on both wide desktop screens and narrow mobile displays.

    Syntax Breakdown

  • background-color: black; — Solid background.
  • background-image: url('banner.jpg'); — Loads a background file.
  • background-repeat: no-repeat; — Displays the image only once.
  • background-size: cover; — Scales image to fill container.

    • Common Mistakes

  • Forgetting quotes inside url(): While browser parsers are forgiving, it is best practice to wrap your image path in quotes: url('images/pattern.png').
  • Putting content behind dark backgrounds without adjusting text color: If you set background-color: black; but forget to set color: white;, your default black text becomes completely invisible!

    • Quick Reference

  • background-color — Sets solid colors behind content.
  • background-image — Specifies source image paths.
  • background-repeat — Limits tiling patterns.
  • background-size: cover — Spans image across element boundaries.

    • Your Task
    Set the `background-color` of the `.hero-banner` class to `black`.
    index.html
    Type code above to start the lesson.
    Live Preview