Learn the Front-end Beta Search

background

Definition

The background CSS property is a shorthand property that sets all background properties in a single declaration. It allows you to define the background color, image, position, size, repeat behavior, attachment, and origin of an element. The background property is essential for creating visually appealing layouts and can be used to add depth, texture, and visual interest to web pages.

Syntax

.hero {
  background: linear-gradient(135deg, #0ea5e9, #6366f1) url("/img/pattern.svg")
    center/cover no-repeat fixed padding-box;
}

Values

  • <color>: solid fills using keywords, hexadecimal, RGB(A), HSL(A), or transparent.
  • <image>: url() references or gradients layered from front to back using commas.
  • <position> / <size>: keywords (center, top, cover, contain) or length pairs to control placement.
  • <repeat>, <attachment>, <origin>, <clip>: tweak tiling, scroll behavior, and painting region.

Practical Examples

.card {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
}

.card--photo {
  background: url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=800&q=80")
    center/cover no-repeat;
}

Mix gradients and images in a single declaration to create layered hero treatments.

HTML

Gradient background

Image + overlay

Layered Background
Code
<div class="grid gap-4 sm:grid-cols-2">
  <div class="space-y-3 rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Gradient background</p>
    <div class="h-36 rounded-lg border border-slate-200" style="background: linear-gradient(135deg, #38bdf8, #6366f1);"></div>
  </div>
  <div class="space-y-3 rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Image + overlay</p>
    <div class="h-36 rounded-lg border border-slate-200" style="background: linear-gradient(180deg, rgba(15,23,42,0.55), rgba(15,23,42,0.55)), url('https://images.unsplash.com/photo-1489515217757-5fd1be406fef?auto=format&fit=crop&w=800&q=80') center/cover no-repeat;">
      <div class="flex h-full items-center justify-center text-base font-semibold text-white">Layered Background</div>
    </div>
  </div>
</div>

Tips & Best Practices

  • Layer multiple backgrounds by comma separating values; the first layer sits closest to the viewer.
  • Use background-size: cover for full-bleed imagery and pair with gradients to maintain contrast.
  • Prefer background-color fallbacks before complex imagery to avoid flashes of unstyled content.

Accessibility & UX Notes

Maintain sufficient contrast between text and its background layers; consider adding semi-transparent overlays or solid fallbacks. Respect user preferences by disabling heavy parallax or fixed backgrounds for reduced-motion visitors.

Browser Support

Background shorthands are widely supported. Individual longhands such as background-clip: text need WebKit-prefixed fallbacks on older Safari builds.

  • background-color, background-image, and background-size for fine-grained control.
  • color for matching foreground text hues against complex backdrops.
  • filter and mix-blend-mode to create layered visual effects.

Related posts