Fixed Background Image Website Examples

Fixed background image examples use background-attachment: fixed to keep a CSS background positioned relative to the viewport while the page content scrolls. The effect can create depth behind readable content, but it behaves differently from scroll and local. This guide shows the difference, complete HTML and CSS examples, responsive fallbacks, nested scrolling behavior, accessibility requirements, and a practical way to capture the result.

The examples below are implementation demonstrations. The available research verifies documentation demos from MDN, Tailwind CSS, and the W3C specification; it does not verify a curated list of independent commercial websites using this pattern.

1. What is a fixed background image?

CSS controls the relationship between a background image and scrolling through background-attachment:

Value	What moves while content scrolls?	Typical use
`fixed`	The background is positioned relative to the viewport and stays visually stationary.	Depth effects behind full-page sections.
`scroll`	The background is attached to the element and scrolls with it.	Normal section backgrounds and hero panels.
`local`	The background moves with the contents of a scrollable element.	Scrollable cards, panels, and nested containers.

MDN documents all three values and demonstrates them in elements that have their own scrolling context: background-attachment on MDN and MDN’s backgrounds tutorial.

2. Minimal fixed-background example

This is the smallest complete page that demonstrates the effect. Replace the image URL with an image you are licensed to use.

<!doctype html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <title>Fixed background demo</title>
  <style>
    :root {
      color-scheme: dark;
      font-family: system-ui, sans-serif;
    }

    body {
      margin: 0;
      color: white;
      background: #111;
    }

    .panel {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 4rem 1.5rem;
      box-sizing: border-box;
      background-image:
        linear-gradient(rgb(0 0 0 / 0.48), rgb(0 0 0 / 0.48)),
        url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee');
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
    }

    .content {
      max-width: 42rem;
      padding: 2rem;
      border-radius: 1rem;
      background: rgb(0 0 0 / 0.55);
    }

    h1 { margin-top: 0; }
  </style>
</head>
<body>
  <main>
    <section class='panel'>
      <article class='content'>
        <h1>A fixed background</h1>
        <p>Scroll the page. The content moves while the background remains attached to the viewport.</p>
      </article>
    </section>
    <section class='panel'>
      <article class='content'>
        <h2>A second section</h2>
        <p>The same background treatment can continue behind another content block.</p>
      </article>
    </section>
  </main>
</body>
</html>

The dark overlay is deliberate: it preserves contrast when the photograph contains bright or detailed areas. Use background-position to choose the focal point and background-size: cover to fill the section without stretching.

3. Fixed, scroll, and local in one comparison

<div class='demo demo-fixed'>fixed</div>
<div class='demo demo-scroll'>scroll</div>
<div class='demo demo-local'>local</div>

<style>
.demo {
  height: 18rem;
  overflow: auto;
  margin: 1rem 0;
  padding: 8rem 2rem;
  color: white;
  background-image: linear-gradient(rgb(0 0 0 / .4), rgb(0 0 0 / .4)), url('background.jpg');
  background-size: cover;
  background-position: center;
}
.demo-fixed  { background-attachment: fixed; }
.demo-scroll { background-attachment: scroll; }
.demo-local  { background-attachment: local; }
</style>

Scroll inside each box as well as the document. In a nested scrolling context, the distinction is easier to see: fixed relates to the viewport, scroll to the element, and local to the element’s scrolling contents.

4. Responsive behavior and mobile fallbacks

A fixed attachment can be expensive or inconsistent on some mobile browsers, especially when the browser dynamically changes the visual viewport as browser chrome appears and disappears. A robust design defines a usable fallback and switches behavior at a breakpoint.

.hero {
  background-attachment: scroll;
  background-position: center;
  background-size: cover;
}

@media (min-width: 768px) {
  .hero {
    background-attachment: fixed;
  }
}

Tailwind CSS documents the equivalent responsive utility pattern bg-local md:bg-fixed: use local behavior below the breakpoint and fixed behavior from the medium breakpoint upward. See Tailwind’s background-attachment documentation.

Keep the foreground readable when the fixed effect is ignored. The W3C CSS Backgrounds and Borders specification describes a viewport-attached background and notes that user agents may need a fallback when platform limitations prevent fixed backgrounds. Treat the fallback as a normal design state, not an error.

5. A practical landing-page pattern

Use separate sections when each section needs a different image. A pseudo-element is useful when you want the image layer independent from the content layer.

<section class='hero hero--mountains'>
  <div class='hero__content'>
    <p class='eyebrow'>Example section</p>
    <h1>Readable content over a fixed image</h1>
    <p>The image is decorative; the message remains in HTML text.</p>
  </div>
</section>

<style>
.hero {
  position: relative;
  isolation: isolate;
  min-height: 70vh;
  display: grid;
  align-items: center;
  padding: 3rem 1.5rem;
  overflow: clip;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: center / cover no-repeat fixed url('mountains.jpg');
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(0 0 0 / .72), rgb(0 0 0 / .16));
}
.hero__content { max-width: 42rem; }
@media (max-width: 767px) {
  .hero::before { background-attachment: scroll; }
}
</style>

The content is still in the document tree, so it remains selectable, searchable, and available to assistive technology. The pseudo-element only provides decoration.

6. Accessibility and content rules

The W3C specification states: “For accessibility reasons, authors should not use background images as the sole method of conveying important information.” Keep headings, instructions, status messages, and meaningful imagery in HTML. If an image communicates information, use an <img> with useful alternative text or provide the same information as text.

Check text and controls against the brightest part of the image, not only the average image color.
Use an overlay, solid panel, or blur to maintain readable contrast.
Do not encode prices, directions, warnings, or other essential content only in a background.
Ensure keyboard focus indicators remain visible over every background position.
Test zoom, high-contrast settings, and a mode where the background fails to load.

background-attachment: fixed is static; it is not itself an animation. If you add animated particles, parallax transforms, or moving backgrounds, provide a reduced-motion alternative. WebKit documents the prefers-reduced-motion media feature and examples of stopping decorative motion in Responsive Design for Motion and its demonstration page.

@media (prefers-reduced-motion: reduce) {
  .decorative-motion {
    animation: none;
    transform: none;
  }
}

7. Image selection, positioning, and loading

Choose a large enough source for the largest viewport, then serve responsive files where possible.
Use background-position to keep faces, products, or landmarks inside the visible crop.
Prefer compressed WebP or AVIF when your delivery pipeline supports them; keep a broadly supported fallback.
Reserve fixed backgrounds for decorative or atmospheric areas. A hero image that is the main content may be better represented by an <img> with explicit dimensions and alt text.
Keep the initial background modest in file size. A full-screen image can delay first paint on slow connections.

8. Capture a fixed-background page for documentation or QA

To verify the effect, capture both the top of the page and a scrolled state at the same viewport width. A screenshot is a visual record; it cannot by itself prove how the background is attached, so pair it with a live scroll test.

Open the page in a real browser and test document scrolling and any nested scroll containers.
Check desktop and narrow viewport breakpoints.
Capture the same page at two scroll positions if you need to show that the background stays stationary.
Check the page with the image blocked or unavailable to confirm content remains understandable.

9. Or skip the browser setup

ScreenshotNeo captures a URL with one request and returns PNG, JPEG, WebP, or PDF. See the ScreenshotNeo API documentation for all options.

curl -G 'https://api.screenshotneo.com/v1/shot' -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/fixed-background-demo -o shot.webp

import requests

r = requests.get('https://api.screenshotneo.com/v1/shot', params={'access_key': 'YOUR_API_KEY', 'url': 'https://example.com/fixed-background-demo'}, timeout=90)
r.raise_for_status()
open('shot.webp', 'wb').write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/fixed-background-demo' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before the capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.

Create a free ScreenshotNeo account to capture your examples.

10. Troubleshooting

Symptom	Likely cause	Fix
The image moves with the content.	The declaration is missing, overridden, or set to `scroll`.	Inspect computed styles and set `background-attachment: fixed` on the element that owns the background.
Nothing appears fixed inside a panel.	The panel is a nested scrolling container; viewport-fixed behavior is being compared with local scrolling.	Test document scrolling separately and compare with `local` or `scroll` intentionally.
The mobile layout jumps or feels sluggish.	Viewport changes and large background repaints can make fixed attachment unreliable on small screens.	Use `background-attachment: scroll` below a breakpoint and optimize the image.
Text is hard to read.	The image has bright or high-detail regions behind the content.	Add a stronger overlay, a solid content surface, or reposition the image focal point.
The screenshot contains a consent banner or chat bubble.	The capture tool treated the page as a fresh visitor.	Use a capture workflow that handles consent and known overlays, or hide approved selectors before capture.
The screenshot is blank or times out.	The page failed to load, requires authentication, or depends on delayed resources.	Check the URL directly, wait for a selector or network idle, provide required headers or cookies, and inspect the response status.

11. Performance, reliability, and cost notes

Rendering cost: fixed backgrounds can trigger large repaints while scrolling, especially with high-resolution images or translucent overlays. Keep the image compressed and test on lower-powered devices.
Network cost: CSS background images are requested when their styles apply. Avoid loading multiple full-screen images above the fold.
Reliability: define a solid background color and readable content before the image loads. This also covers blocked requests and user preferences.
Screenshot consistency: use a fixed viewport, wait for the image and fonts, and capture at known scroll positions. A single screenshot cannot demonstrate the scrolling relationship.
API cost: ScreenshotNeo bills only clean shots. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing; the response includes X-Page-Verdict and X-Billed headers. You can choose a cache TTL, use async jobs and signed webhooks, or send up to 100 URLs in one bulk call.

12. FAQ

Is a fixed background the same as parallax?

No. A fixed background remains attached to the viewport. Parallax usually means two or more layers move at different rates, often through transforms or scroll-linked logic.

Can I use `background-attachment: fixed` on an image element?

No. The property applies to CSS backgrounds. For an image element, use layout and positioning techniques such as an absolutely positioned layer, while preserving meaningful alternative text when the image conveys information.

Should every section on a page use the same fixed image?

No. Repeating one image can reduce visual separation and increase the amount of image area users must process. Use the effect where it supports the section’s purpose.

How do I prove the effect in a design review?

Show a short recording or two screenshots at different scroll positions, alongside the live page. A static image alone cannot establish whether the background is viewport-fixed or simply positioned to look similar.

Does Tailwind support this without custom CSS?

Yes. Use bg-fixed, bg-scroll, or bg-local, and combine variants such as bg-local md:bg-fixed for responsive behavior.