Loading...

CSS Backgrounds

You can color text. Now paint the surface behind it. Backgrounds fill the element’s box — solid colors, photos, and later gradients — while the letters stay on top with color.

What is a CSS background?

A background is the layer painted behind an element’s content (and usually behind its padding area). You control it with a family of properties: background-color, background-image, background-repeat, background-size, background-position, and a background shorthand. Gradients get their own lesson next — today is solid fills and image basics.

Properties at a glance

Learn the jobs first. You do not need every keyword on day one.

📊 Everyday CSS background properties

Property Job Everyday start
background-color Solid fill behind content background-color: #f1f5f9;
background-image Picture (or later gradient) layer background-image: url("hero.jpg");
background-repeat Tile or stop tiling background-repeat: no-repeat;
background-size Scale the image in the box background-size: cover;
background-position Align the image background-position: center;
background Shorthand combining several background: #0f172a url("a.jpg") center / cover no-repeat;

Solid fills with background-color

The simplest background is a solid color. Use any color value you already know — named, hex, rgb, or hsl.

Solid card background

css
CSS Code 
.card {
background-color: #f1f5f9;
color: #0f172a;
padding: 1rem;
}

Keep text readable

Set color for the letters and background-color for the box. Pale fills need darker text; dark fills need lighter text.

Images with background-image

Point to a file with url("…"). Paths are relative to the CSS file (or absolute URLs). The image sits behind the content — it is not an <img> in the HTML flow.

Photo behind a hero block

css
CSS Code 
.hero {
background-image: url("hero.jpg");
color: white;
min-height: 12rem;
padding: 2rem;
}

Image vs <img>

Use <img> when the picture is content (alt text, meaning). Use background-image when the picture is decoration behind UI or a section.

Stop the tile: no-repeat + cover

By default many browsers tile a small image. For heroes, turn tiling off and scale with cover so the photo fills the box.

Hero image that fills the box

css
CSS Code 
.hero {
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

cover in one sentence

cover scales the image until the box is filled — edges may crop. contain fits the whole image inside — you may see empty bands.

Position the focal point

background-position aims which part of the photo stays visible — useful when cover crops faces or logos.

Aim the photo

css
CSS Code 
.hero {
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}

Shorthand (keep it readable)

You can combine values in background. Start longhand while learning; switch to shorthand when the order feels familiar.

Compact background shorthand

css
CSS Code 
.banner {
background: #0f172a url("banner.jpg") center / cover no-repeat;
color: #f8fafc;
padding: 2rem;
}

Order tip

A common pattern is: color, image, position / size, repeat. If a shortcut confuses you, expand back to separate properties — both are valid.

Try it yourself

  1. Build a .card with background-color: #f1f5f9 and dark color text.
  2. Add a .hero with background-image: url("…"), min-height, and light text.
  3. Set background-repeat: no-repeat, background-size: cover, and background-position: center.
  4. Move position to left center or right center and watch what stays in frame.
  5. Optional: rewrite the hero with a background shorthand that includes a fallback color before the url().

Common mistakes

  • Using color when you meant to fill the box — that only paints letters
  • Forgetting no-repeat so a logo tiles across the section
  • Broken url("…") paths (wrong folder or missing quotes)
  • Huge uncompressed photos as backgrounds — slow pages
  • Jumping into complex gradients before solid color + one image feel solid (gradients are next)

Summary

  • Backgrounds paint behind content; color paints the text
  • background-color for solid fills; background-image for photos
  • Use no-repeat, cover/contain, and position to control photos
  • Shorthand is optional — clarity beats cleverness while learning
  • Leave full gradient recipes for the next lesson
  • Practice a gray card and one photo hero until the property names stick

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Css Tutorial