Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsA fixed background image stays visually anchored to the viewport while the page content scrolls over it. In CSS, set background-attachment: fixed; use scroll when the image should move with its element, or local when it should move with the contents of a scrollable element. The examples below show each behavior, explain what the documentation demos do (and do not) prove, and provide responsive and accessibility-safe patterns you can use in a real site.
What a fixed background image is
The MDN reference for background-attachment defines three relevant relationships between a background and scrolling:
| Value | What moves while content scrolls | Typical use |
|---|---|---|
fixed |
The background is positioned relative to the viewport, so it appears to stay in place while the document moves. | Atmospheric hero sections, long-form pages, and layered editorial designs. |
scroll |
The background is attached to the element and moves as that element moves through the document. | Normal section backgrounds and predictable mobile behavior. |
local |
The background moves with the element’s contents, including the contents of a scrollable container. | Scrollable cards, code panes, and nested overflow regions. |
A screenshot can make these modes look identical. Test them while actually scrolling the document and any nested container; MDN’s interactive backgrounds and borders tutorial demonstrates that distinction.
Example 1: a viewport-fixed hero
This self-contained page creates a dark overlay over a landscape image. The overlay keeps text readable while the image remains fixed during document scrolling.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<!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; }
* { box-sizing: border-box; }
body {
margin: 0;
font: 1rem/1.6 system-ui, sans-serif;
color: #fff;
background: #111;
}
.hero {
min-height: 85vh;
display: grid;
place-items: center;
padding: 4rem 1.25rem;
text-align: center;
background-image:
linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
url("mountains.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.hero h1 { max-width: 18ch; margin: 0; font-size: clamp(2.3rem, 7vw, 5rem); }
.copy { max-width: 65ch; margin: 0 auto; padding: 5rem 1.25rem; background: #111; }
</style>
</head>
<body>
<header class="hero"><h1>A background that stays put</h1></header>
<main class="copy">
<p>Scroll this text. The foreground moves; the hero's background is tied to the viewport.</p>
<p>Add enough content to make the scroll relationship obvious on your test device.</p>
</main>
</body>
</html>background-size: cover fills the hero but crops the image differently at each aspect ratio. Keep the focal subject near the center or adjust background-position (for example, center top) after checking narrow screens.
Example 2: compare fixed, scroll, and local
Use three panels with the same image to isolate the attachment behavior. Each panel has its own scrollable content, so you can test both nested and document scrolling.
.demo {
height: 16rem;
overflow: auto;
margin: 1rem 0;
padding: 1.5rem;
color: white;
background-image: linear-gradient(#0008, #0008), url("texture.jpg");
background-size: cover;
background-position: center;
}
.demo.fixed { background-attachment: fixed; }
.demo.scroll { background-attachment: scroll; }
.demo.local { background-attachment: local; }
- Fixed: the image tracks the viewport rather than the panel’s content. In a nested scrolling test, the result can vary with browser and platform constraints, so verify on your supported browsers.
- Scroll: the image is attached to the panel itself and moves with that element.
- Local: the image scrolls with the panel’s contents, which is useful when the panel has
overflow: auto.
The MDN property page and interactive tutorial are implementation demonstrations, not evidence that a particular commercial website uses the effect. No independently verified gallery of named live sites is established here; treat these demos as reproducible patterns rather than a brand showcase.
Example 3: a full-page fixed background with readable sections
Applying the image to body can make it persist across multiple sections. Give each content block an opaque or translucent surface so text does not disappear over high-contrast artwork.
Recommended Free Tools
body {
margin: 0;
color: #17202a;
background: #dce7ef url("paper.jpg") center / cover fixed no-repeat;
}
.section {
max-width: 70rem;
margin: 0 auto;
padding: clamp(3rem, 8vw, 8rem) 1.25rem;
}
.section > * {
max-width: 65ch;
padding: .5rem 1rem;
background: rgb(255 255 255 / .9);
}
Do not assume a fixed image will remain fixed in every environment. The W3C CSS Backgrounds and Borders specification describes a fallback where a user agent may ignore fixed because of platform limitations. Your layout and contrast therefore need to work when the image scrolls normally.
Rank #2
Responsive fixed-background patterns
Switch to local or scroll on small screens
Mobile browsers may treat viewport-fixed backgrounds differently, and a large image can consume memory or produce an awkward crop. A progressive pattern uses normal scrolling by default and enables fixed attachment at a wider breakpoint:
.feature {
background: url("feature.jpg") center / cover no-repeat;
background-attachment: local;
}
@media (min-width: 768px) {
.feature { background-attachment: fixed; }
}
This is the plain CSS equivalent of Tailwind’s documented bg-local md:bg-fixed pattern. See the Tailwind background-attachment documentation for the utility classes and responsive example.
Tailwind version
<section class="bg-[url('/feature.jpg')] bg-cover bg-center bg-local md:bg-fixed">
<h2>Readable at every width</h2>
</section>Use a picture or an ordinary image when the image carries meaning
CSS backgrounds are decorative by default and do not provide an equivalent alt attribute. If a photograph, diagram, or text conveys information, use an <img> with meaningful alternative text (or visible text) instead of relying on a background alone.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Accessibility and content safeguards
The W3C specification states: “For accessibility reasons, authors should not use background images as the sole method of conveying important information.” Link the visual to an equivalent heading, paragraph, control label, or image alternative.
- Contrast: test foreground text against the lightest and darkest parts of the image. A gradient overlay is often more robust than a single semi-transparent color.
- Reading order: keep headings, instructions, prices, and status messages in the HTML, not embedded in the artwork.
- Zoom and reflow: check at 200% zoom and narrow widths; avoid fixed heights that clip enlarged text.
- Reduced motion:
background-attachment: fixedis not itself an animation. If you add a moving or animated background, provide a reduced-motion alternative using@media (prefers-reduced-motion: reduce). WebKit documents the feature in Responsive Design for Motion and shows an adapted decorative background in its demonstration.
@media (prefers-reduced-motion: reduce) {
.animated-background { animation: none; }
}
How to evaluate a fixed-background example
- Open the page on a desktop browser and scroll the document slowly; note whether the image remains aligned to the viewport.
- Scroll any nested panel independently; compare
fixed,scroll, andlocalrather than judging from a static screenshot. - Resize through your mobile breakpoint and confirm that the fallback attachment still preserves the focal point.
- Disable images or force the fallback behavior and verify that every message and control remains understandable.
- Test keyboard focus, zoom, high-contrast settings where available, and a reduced-motion preference if the design includes movement.
Capture your examples without setting up a browser
For repeatable documentation, QA, or regression snapshots, ScreenshotNeo is a website screenshot API and MCP server. It accepts a URL and returns PNG, JPEG, WebP, or PDF. Before capture it can accept cookie/consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers.
One-call cURL capture
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpReplace the URL with your fixed-background demo. The complete option list and response details are in the ScreenshotNeo documentation.
Python
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
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()));Useful capture options for this design
- Use full-page capture when the fixed effect must be reviewed across the entire scroll length; lazy-loaded images are loaded for the capture.
- Set a device preset or viewport and retina scale to compare desktop and mobile breakpoints.
- Set dark mode, timezone, geolocation, custom headers, cookies, user agent, or Authorization when the page changes by environment.
- Wait for a selector, a delay, or network idle so the background and fonts have rendered; hide selectors or click an element before capture when a consent dialog needs interaction.
- Block ads, trackers, requests, or resource types; apply custom CSS or JavaScript; capture one element by CSS selector; resize the output; or request a PDF with paper size, margins, landscape mode, and page ranges.
- Use a chosen cache TTL, signed links for public
<img>tags, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, the usage API, or the OpenAPI specification.
ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. Parameter names used by other screenshot APIs work as well, which can simplify migration.
Free tools Windows power users keep installed
One-click scans. No signup required.
Plans and billing
| Plan | Included shots per month | Price |
|---|---|---|
| Free | 1,000 | $0, no card |
| Starter | 3,000 | $5 |
| Growth | 15,000 | $15 |
| Pro | 60,000 | $39 |
| Scale | 250,000 | $99 |
| Business | 1,000,000 | $249 |
Yearly billing gives two months free, and every feature is available on every plan. Create a free ScreenshotNeo account to get 1,000 screenshots per month without a card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting common failures
The image moves instead of staying fixed
Confirm that the declaration is not overridden by a later rule, a shorthand such as background:, or a breakpoint rule. Inspect the computed background-attachment value in developer tools. Also test document scrolling rather than only scrolling an inner container.
The fixed effect is missing on a phone
Your browser or platform may limit viewport-fixed backgrounds. Treat that as a supported fallback: use local or scroll below a breakpoint and make sure the image crop and text remain usable.
The image is blank or appears late
Check the URL, HTTPS mixed-content errors, server response, and image dimensions. For automated capture, wait for a known selector or network idle. Lazy-loaded images may require full-page capture or a deliberate delay.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteRank #4
Text is hard to read
Increase overlay opacity, reposition the image, add a solid content surface, or replace the background with an inline image plus text. Never encode essential instructions only in the artwork.
Nested scrolling looks inconsistent
Set an explicit height or max-height with overflow: auto on the test element, then compare all three attachment values in the same browser. A static screenshot cannot establish the scrolling relationship.
FAQ
Is a fixed background the same as parallax?
No. A fixed attachment can create a simple stationary backdrop, while parallax usually adds different movement rates or transforms. The CSS property alone does not guarantee a parallax animation.
Should every hero use background-attachment: fixed?
No. Choose it only when the stationary visual supports the content and survives responsive, zoom, contrast, and fallback testing. A normal scrolling background is often simpler and more reliable.
Can I put important text inside the background image?
You should not. Keep the text in HTML or provide an equivalent accessible alternative, following the W3C guidance quoted above.
How do I prove that a design works at several breakpoints?
Capture the same URL at representative viewport sizes, including a narrow mobile width and a desktop width, and compare the scroll behavior in a real browser as well as the resulting screenshots.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
