Backgrounds

🎨 CSS3+ 🟢 Chapter 30 of 49 📂 Phase 11: Backgrounds & Visual Effects 📅 2026 Edition

📌 Covered in this chapter: background-color · background-image · background-size · background-position · background-repeat · background-attachment · Multiple Backgrounds · Gradients · Overlays

Welcome to Chapter 30: Backgrounds — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.

1Background Properties

CSS▶ Try in Editor

.hero {
  background-color: #1e293b;
  background-image: url('/images/hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

background-size: cover — fill container, crop if needed
background-size: contain — full image visible
background-position — top, center, 50% 30%, etc.
background-attachment: fixed — parallax-like effect

2Multiple Backgrounds & Overlays

CSS

.hero-overlay {
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)),
    url('/images/hero.jpg') center / cover no-repeat;
  min-height: 60vh;
  color: #fff;
}

First listed background top layer — gradient overlay image meeda render avuthundi.

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy · CSS Complete Roadmap · Last updated August 2026