CSS Academy · Lesson

Background Color and Image

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

Lesson 2 of 413 steps

Background Color and Image is a free CSS Academy lesson on CoddyKit. This is 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, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.

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.

<div class="hero">Hero section</div>

background-image

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

<div class="banner">Banner (image missing &rarr; fallback color shows)</div>

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

<div class="hero"></div>

background-position

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

<div class="hero"></div>

background-repeat

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

<div class="hero"></div>
  <div class="pattern"></div>

background-attachment

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

<div class="spacer">Scroll down &darr;</div>
  <div class="parallax">Fixed background</div>
  <div class="spacer">Scroll up &uarr;</div>

Multiple Backgrounds

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

<div class="card">Overlay + photo layers</div>

background Shorthand

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

<div class="hero"></div>

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.

<div class="card">Clip &amp; Origin</div>

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>Gradient Text</h1>

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 class="hero-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='800'><rect width='400' height='800' fill='%23ff6347'/><circle cx='200' cy='200' r='150' fill='%231e90ff'/></svg>" alt="hero" />

Quick Check

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

Answer it in the interactive lesson

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.

Free to start

Learn CSS with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 40
Lessons: 159

Start learning free View the full course

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. 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. The CSS Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

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