CSS Academy · Lesson

Background Color and Image

Apply background colors and images using background-color and background-image properties.

Background Color and Image is a free CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

background-color

The background-color property sets a solid color behind an element. It accepts any CSS color value and is visible through transparent areas of background images.

body {
  background-color: #f5f5f5;
}

.hero {
  background-color: hsl(210, 60%, 20%);
}

background-image

background-image sets one or more images as the element background. Images are layered above background-color.

.banner {
  background-image: url("hero.jpg");
  background-color: #333; /* fallback */
}

background-size

background-size controls image dimensions. Key values:

cover — fills the area, crops if needed
contain — fits entirely inside, may leave gaps
100% 100% — stretches to fill exactly

.hero {
  background-size: cover;
}

background-position

background-position sets where the image is placed. Use keywords or percentage/length values.

.hero {
  background-position: center top;
  /* or */
  background-position: 50% 20%;
}

background-repeat

By default images tile. Control tiling with background-repeat:

.hero {
  background-repeat: no-repeat; /* single image */
}

.pattern {
  background-repeat: repeat-x; /* tile horizontally */
}

background-attachment

background-attachment determines if an image scrolls with the page. fixed creates a parallax-like effect; scroll is the default.

.parallax {
  background-attachment: fixed;
  background-size: cover;
}

Multiple Backgrounds

CSS supports multiple comma-separated background layers. The first listed appears on top.

.card {
  background-image:
    url("overlay.png"),
    url("photo.jpg");
  background-size: auto, cover;
}

background Shorthand

The background shorthand combines all background properties in one declaration. Order matters for size: write it after position separated by /.

.hero {
  background: url("hero.jpg") center/cover no-repeat #333;
}

Background Clip and Origin

background-clip controls where the background is painted relative to the box model. background-origin sets the reference point for positioning.

.card {
  background-clip: padding-box; /* not under border */
  background-origin: content-box;
}

Text Background Clip

Use background-clip: text with a transparent text color to clip a background image or gradient to the shape of the text.

h1 {
  background: linear-gradient(to right, red, blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

object-fit for <img> vs background-image

For <img> tags, use object-fit: cover and object-position instead of background-image. This keeps images in the DOM for accessibility and SEO.

img.hero-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
}

Quick Check

Which background-size value fills the area and clips the image rather than leaving gaps?

Recap

Use background-color as a fallback below images. background-size: cover is the go-to for full-bleed hero images. Multiple background layers give you compositing power. The shorthand combines all background properties concisely.

Frequently asked questions

Is the “Background Color and Image” lesson free?

Yes — the full text of “Background Color and Image” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Background Color and Image”?

Apply background colors and images using background-color and background-image properties. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Background Color and Image” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy