CSS Backgrounds

Gradients, patterns, background-size, blend modes, and decorative effects.

Overview

Backgrounds add visual interest to web designs.

Key Concepts

• Gradients — Linear, radial, conic
• Background Size — Cover, contain, custom
• Background Position — Precise placement
• Multiple Backgrounds — Layered effects
• Background Blend — Mix layers

Code Examples

/* Linear gradient */
.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Radial gradient */
.radial-bg {
  background: radial-gradient(circle at center, #667eea 0%, #764ba2 100%);
}

/* Conic gradient */
.conic-bg {
  background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);
}

/* Patterns */
.pattern-dots {
  background-image: radial-gradient(#000 1px, transparent 1px);
  background-size: 20px 20px;
}

.pattern-lines {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.1) 10px,
    rgba(0, 0, 0, 0.1) 20px
  );
}

.pattern-grid {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Hero with gradient overlay */
.hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('/hero.jpg') center/cover;
}

/* Background size */
.bg-cover { background-size: cover; }
.bg-contain { background-size: contain; }
.bg-custom { background-size: 100px 200px; }

/* Background position */
.bg-center { background-position: center; }
.bg-top { background-position: top; }
.bg-bottom-right { background-position: bottom right; }

/* Multiple backgrounds */
.complex-bg {
  background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
    url('/texture.png'),
    linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-size: 100% 100%, 200px 200px, 100% 100%;
}

/* Blend modes */
.blend-overlay {
  background:
    url('/image.jpg') center/cover,
    linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-blend-mode: overlay;
}

/* Fixed background */
.parallax {
  background: url('/bg.jpg') fixed center/cover;
}

/* Responsive backgrounds */
.responsive-bg {
  background: url('/bg-mobile.jpg') center/cover;
}

@media (min-width: 768px) {
  .responsive-bg {
    background-image: url('/bg-desktop.jpg');
  }
}

Practice

Create a hero section with gradient background and pattern overlay.