Backgrounds

Style element backgrounds using colors, images, gradients, and multiple layered backgrounds, controlling their repetition, position, size, and scroll behavior.

The background of an element is far more flexible than just a flat color. CSS lets you place images, tile patterns, generate gradients on the fly without any image file at all, and even stack several backgrounds on top of one another as layers. This lesson walks through the full background property family and shows how they combine to build real visual effects like hero sections, textured cards, and parallax-style headers.

background-color and background-image

background-color paints a solid, flat color behind an element's content and padding (it stops at the border, and does not show through the margin). background-image layers an image — or a CSS gradient, which is technically also an 'image' value — on top of that color. If the image has transparent areas or doesn't fully cover the box, the background-color shows through underneath, making it a useful fallback while an image loads or if it fails to load.

background-image accepts a url() reference to an image file, or one of CSS's built-in gradient functions: linear-gradient(), radial-gradient(), or conic-gradient(). Gradients are computed by the browser, so they scale perfectly to any size with no pixelation and require no image file or HTTP request at all.

Repeat, position, size, and attachment

By default, a background image tiles infinitely in both directions to fill the box (background-repeat: repeat). You can restrict this to repeat-x, repeat-y, or turn it off entirely with no-repeat. background-position controls where the image starts, using keywords (center, top right) or lengths/percentages, and is especially important when no-repeat is used so you can control exactly which part of the box the single image sits in.

background-size controls how large the image renders. cover scales the image up (cropping if necessary) so it completely fills the box with no gaps — the standard choice for full-bleed hero images. contain scales the image so the whole image is visible with no cropping, potentially leaving gaps. You can also give explicit dimensions like background-size: 200px 100px or percentages.

background-attachment controls whether the background scrolls with the page content (scroll, the default) or stays fixed in place relative to the viewport while the page scrolls past it (fixed) — this is the classic technique behind simple parallax-style headers.

Multiple backgrounds

background-image (and its related properties) can take a comma-separated list to layer several backgrounds on one element. The first item in the list is drawn on top, and later items are drawn progressively further back, with background-color always sitting at the very bottom as the final fallback layer. Each comma-separated background-image value can have its own corresponding background-repeat, background-position, and background-size — the lists are matched up positionally.

Background Shorthand

The background shorthand can combine color, image, position/size (separated by /), repeat, and attachment in one declaration When using shorthand, background-color must be the LAST value listed

.hero {
  background: url("hero.jpg") center / cover no-repeat fixed, #1a1a2e;
}

Code Examples

linear-gradient(135deg, ...) generates a smooth color transition at a 135-degree angle from purple to blue, entirely computed by the browser — no image file needed, and it scales flawlessly to any container size. Expected result: A banner with a diagonal purple-to-blue gradient fill.

background-size: cover scales the image to completely fill the 400px-tall box (cropping the edges if the aspect ratios don't match), background-position: center keeps the most important part of the image centered, and no-repeat stops the image from tiling.

Two layers are stacked: a semi-transparent black gradient on top (used as a darkening overlay) and a texture image underneath. Because the top layer has alpha transparency, the texture shows through darkened — a common technique for making text readable over busy photos.

.banner {
  background-image: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  padding: 48px;
}

.hero {
  background-image: url("landscape.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 400px;
}

.card {
  background-image:
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
    url("texture.jpg");
  background-size: cover, cover;
  background-position: center, center;
}

Important Rules

In the background shorthand, background-color must be listed last, or the declaration is invalid.

background-size: cover may crop parts of the image; background-size: contain never crops but may leave visible gaps.

Multiple background-image layers are painted first-listed-on-top; background-color always renders beneath every image layer.

background-attachment: fixed ties the image to the viewport, not the element, producing a simple parallax effect as the page scrolls.

Why this matters on real projects

Gradients replace what used to require exporting and hosting an extra image file, saving an HTTP request and giving perfectly crisp results at any screen resolution or zoom level. Layered backgrounds (a translucent gradient over a photo) are the standard technique for making white text legible over a busy hero image without needing a separate overlay <div> element in the HTML..hero { background: #222 url("bg.jpg") center / cover no-repeat; }.hero { background: url("bg.jpg") center / cover no-repeat #222; }

In the background shorthand, background-color must come last in the value list. Placing it first is treated as invalid by many parsers and can cause the whole shorthand declaration to be dropped.

[Identify the Error] This rule is meant to show a non-repeating background image scaled to fill the box. What is wrong with it? .box { background-image: url("photo.jpg"); background-size: cover; background-repeat: repeat; } .box { background-image: url("photo.jpg"); background-size: cover; background-repeat: repeat; } A. background-size: cover is invalid syntax B. background-repeat should be no-repeat, since repeat is redundant and can cause tiling artifacts at the box's edges once the image is scaled by cover C. url() cannot be used with background-image D. Nothing is wrong; this is correct as written

B. background-repeat should be no-repeat, since repeat is redundant and can cause tiling artifacts at the box's edges once the image is scaled by cover — background-size: cover already scales the image to fill the entire box, so background-repeat: repeat serves no purpose and, in edge cases with sub-pixel rounding, can produce faint tiling seams at the box's edge. The idiomatic pairing is background-size: cover with background-repeat: no-repeat.

Style a.hero section with a background photo that fully covers the box without repeating, stays centered, and has a dark semi-transparent gradient layered on top of it to improve text contrast..hero { background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("photo.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; }

Stack two background-image values separated by a comma: a linear-gradient with rgba() colors first, then the url() image.