Codectionary / Developer documentation / CSS

Multiple Background Layers

An element can paint several background layers separated by commas.

What it is and why to use it

An element can paint several background layers separated by commas. The first listed image is nearest the viewer, and the background colour lies underneath all image layers. This is useful for combining a subtle pattern with a colour wash without extra decorative elements.

Common mistakes and limitations

Lists for background-size, position and repeat correspond to image layers and can repeat their values when their lengths differ. A background image has no alt text; keep meaningful information in the document. Check text contrast against every visible layer.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<div class="banner"><h3>Study notes</h3><p>A pattern above a gentle gradient.</p></div>

Syntax

background-image: linear-gradient(...), linear-gradient(...);

Examples

Multiple Background Layers

Run the CSS against the supplied HTML, then experiment with the values.

.banner { padding: 2rem; color: #0f172a; background-color: #eff6ff;
  background-image: repeating-linear-gradient(45deg, #2563eb12 0 2px, transparent 2px 12px), linear-gradient(90deg, #dbeafe, #f5f3ff); }
  1. The repeating gradient is the uppermost image layer.
  2. Its transparent areas reveal the second gradient below.
  3. Both layers are original CSS-generated decoration with no external image request. This is useful for a lightweight banner whose content remains real HTML.
HTML used by this example
<div class="demo"><div class="banner"><h3>Study notes</h3><p>A pattern above a gentle gradient.</p></div></div>

Best practices

  • Lists for background-size, position and repeat correspond to image layers and can repeat their values when their lengths differ. A background image has no alt text; keep meaningful information in the document. Check text contrast against every visible layer.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading