What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
A fixed background image stays in place as the page scrolls because CSS positions it against the viewport: background-attachment: fixed. The examples below show the effect, contrast it with scroll and local, and provide responsive and accessible patterns you can adapt. The cited examples are documentation demos rather than a verified gallery of commercial websites.
What a fixed background image does
CSS backgrounds can follow three different scrolling models. With fixed, the background is positioned relative to the viewport, so the foreground content moves over an apparently stationary image. With scroll, the background is attached to the element and normally moves as that element scrolls. With local, the background moves with the contents of a scrollable element. MDN documents these values and demonstrates them in scrolling containers in its background-attachment reference and backgrounds tutorial.
A screenshot can make the three modes look identical. Test while actually scrolling the document and any nested panel: the attachment target, not the image itself, determines what you see.
| Value | Background is attached to | Typical result while scrolling | Useful for |
|---|---|---|---|
fixed |
The viewport | Image appears stationary while content passes over it | Hero sections, atmospheric page backgrounds |
scroll |
The element | Image moves with the element’s scrolling content | Conventional section backgrounds |
local |
The element’s contents | Image follows content inside a scrollable element | Scrollable cards, panels and code windows |
Documented examples you can inspect
MDN’s interactive comparison
MDN’s backgrounds-and-borders lesson provides an interactive comparison of fixed, scroll and local behavior. Use it to observe both document scrolling and scrolling inside an element. It is an implementation demonstration, not evidence that a named brand uses the design.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Tailwind’s fixed utility
Tailwind CSS maps its bg-fixed utility to background-attachment: fixed. Its background-attachment documentation also shows bg-local md:bg-fixed: the background follows content below the medium breakpoint and becomes viewport-fixed at medium sizes and above. That pattern is a practical model for handling small screens without claiming that every mobile browser renders fixed backgrounds identically.
W3C specification example
The CSS Backgrounds and Borders Module Level 3 describes a background that remains attached to the viewport as a document scrolls and notes that a user agent with platform limitations may ignore fixed. Treat that as a progressive-enhancement requirement: the page must remain readable when the image scrolls or is not painted as fixed.
Build a fixed-background hero with plain CSS
This minimal page creates a viewport-fixed background, a readable overlay, and ordinary content that scrolls above it. Replace the image URL with an asset 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: light; }
* { box-sizing: border-box; }
body {
margin: 0;
font: 1rem/1.6 system-ui, sans-serif;
color: #fff;
background: #101820 url("/images/mountains.webp") center / cover fixed no-repeat;
}
.scrim { min-height: 100vh; background: rgb(0 0 0 / 45%); }
header, main { max-width: 70rem; margin: auto; padding: 2rem; }
.hero { min-height: 70vh; display: grid; align-content: center; }
.panel { max-width: 42rem; padding: 2rem; background: rgb(0 0 0 / 60%); border-radius: .75rem; }
section { margin-top: 2rem; padding: 2rem; color: #17202a; background: #fff; border-radius: .75rem; }
@media (max-width: 700px) {
body { background-attachment: scroll; background-position: center top; }
header, main { padding: 1rem; }
.hero { min-height: 60vh; }
.panel, section { padding: 1.25rem; }
}
</style>
</head>
<body>
<div class="scrim">
<header><a href="#content" style="color:inherit">Skip to content</a></header>
<main id="content">
<div class="hero">
<div class="panel">
<h1>A viewport-fixed background</h1>
<p>Scroll to see the content move while the desktop background stays in place.</p>
</div>
</div>
<section><h2>Content remains primary</h2><p>This text is real HTML, not information embedded only in the image.</p></section>
<section><h2>Another section</h2><p>Add enough content to make document scrolling obvious during testing.</p></section>
</main>
</div>
</body>
</html>The shorthand in background: ... center / cover fixed no-repeat sets the image position, size, attachment and repeat behavior in one declaration. Use separate longhand properties when your team finds them easier to audit:
Recommended Free Tools
body {
background-image: url("/images/mountains.webp");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}Three practical layout patterns
Full-page atmospheric background
Apply the background to body or a page wrapper with a solid-color fallback. Keep text in normal HTML and place a translucent overlay behind it. background-size: cover fills the viewport but can crop important parts of a photograph, so choose an image whose subject remains useful when edges are removed.
Fixed image behind one section
For a single callout, put the image on a section rather than the whole document:
Rank #2
.quote {
background: url("/images/texture.webp") center / cover fixed;
color: white;
padding: 6rem 2rem;
position: relative;
}
.quote > * { position: relative; z-index: 1; }
.quote::before {
content: "";
position: absolute;
inset: 0;
background: rgb(0 0 0 / 55%);
}The pseudo-element supplies contrast without altering the source image. If the section is shorter than the viewport, the fixed behavior may be subtle; test with neighboring content and a real scroll gesture.
Nested scrolling panel
To demonstrate local, create an element with a constrained height and overflow: auto:
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstall.story {
height: 18rem;
overflow: auto;
background: url("/images/paper.webp") center / cover local;
}Changing local to scroll or fixed changes what moves when the panel itself scrolls. This is the distinction shown by MDN’s interactive examples.
Responsive behavior, mobile and fallbacks
Do not assume that a desktop fixed background should remain fixed at every viewport width. A smaller viewport has less room for text, more aggressive image cropping and potentially different browser rendering constraints. A straightforward CSS fallback is:
body { background-attachment: scroll; }
@media (min-width: 768px) {
body { background-attachment: fixed; }
}In Tailwind, the equivalent documented idea is bg-local md:bg-fixed. You can choose bg-scroll instead of bg-local when you want the element-attached behavior rather than content-attached behavior.
Always provide a solid background color before the image declaration. If a browser ignores fixed, the color and foreground content still form a usable page. Avoid placing critical controls over the busiest part of an image, and verify the layout in portrait and landscape orientations.
Accessibility and motion considerations
Keep meaning out of the image alone
The W3C specification states: “For accessibility reasons, authors should not use background images as the sole method of conveying important information.” A background can be decorative or reinforce a heading, but names, instructions, status, warnings and data must also exist as text or another accessible HTML representation. Give informative images an appropriate alternative in the content when they are not merely decorative.
Maintain contrast
Use a tested text color, overlay or solid panel. Check the busiest and lightest portions of the image, not just the center shown in your design mockup. Links and focus indicators must remain visible as the background changes behind them.
Respect reduced-motion preferences when effects are added
background-attachment: fixed is a static positioning property; it is not, by itself, an animation. If you add parallax, zooming, animated gradients or a moving background, provide an alternate presentation for users who request reduced motion. WebKit’s Responsive Design for Motion article explains the prefers-reduced-motion media feature, and its demonstration includes adapting a decorative background animation.
@media (prefers-reduced-motion: reduce) {
.animated-background { animation: none; }
.parallax-layer { transform: none; }
}How to test the effect correctly
- Load the page with a real image and enough content to require document scrolling.
- Scroll the document slowly and confirm whether the image remains viewport-relative or travels with the element.
- Repeat inside every nested element with
overflow: auto; nested scrolling can produce a different result from document scrolling. - Resize through the breakpoint and test both the fixed and fallback states.
- Turn off images or emulate a browser that does not support the fixed behavior. Confirm that color, text and controls remain usable.
- Check keyboard focus, zoomed text, high-contrast settings and reduced-motion preferences.
Common problems and fixes
The image appears to move
Check that the rule targets the element you are scrolling and that a later, more specific rule is not setting background-attachment: scroll. Inspect computed styles in developer tools. If you are scrolling a nested panel, a background on body may not behave like the panel’s own background.
The image is cropped unexpectedly
cover intentionally crops one axis to fill the box. Try a different focal point with background-position, use contain when the whole image must be visible, or select an image composed for the target aspect ratio.
Text is hard to read
Add an overlay or opaque content panel, simplify the image, and test every scroll position. Do not rely on a single gradient that leaves the lower part of a long section uncovered.
Rank #4
Mobile performance is poor
Use appropriately sized, compressed images and avoid loading a desktop-resolution asset into a small viewport. Switching to scroll or local below a breakpoint can reduce rendering surprises. This is a compatibility and design choice, not a claim that every mobile browser fails to support fixed backgrounds.
The background disappears in print
Browsers and print settings commonly omit background graphics. Put all essential content in HTML and define print-friendly colors and spacing in an @media print rule.
Free tools Windows power users keep installed
One-click scans. No signup required.
Or skip the browser setup
If you need rendered examples for documentation, regression checks or design review, ScreenshotNeo returns a PNG, JPEG, WebP or PDF from one GET request. It accepts cookie and consent banners as a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets before capture; each step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
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}`);See the ScreenshotNeo documentation for options such as full-page capture, CSS-selector element capture, dark mode, device and viewport settings, retina scale, custom CSS or JavaScript, waits, request blocking, headers and cookies, geolocation, transparent backgrounds, resizing, caching, signed links, asynchronous webhooks, bulk capture and PDF controls. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000, and every feature is available on every plan. Create a free ScreenshotNeo account.
Choosing the right attachment mode
- Choose
fixedwhen the image is a viewport-level atmosphere and foreground content should move independently. - Choose
scrollfor a conventional element background that travels with its box. - Choose
localwhen a scrollable component’s background should move with its contents. - Choose a breakpoint-specific fallback when fixed positioning harms readability, cropping or consistency on small screens.
- Choose no background image at all when the design cannot preserve contrast and meaning without it.
Frequently Asked Questions
Can I use several fixed background layers?
Yes. CSS accepts comma-separated background layers; give each layer its own position, size, repeat and attachment value, keeping the color fallback on the final layer.
Does a fixed background create a parallax animation?
No. Fixed attachment changes the relationship between the image and scrolling content but does not animate the image by itself. Parallax requires additional movement, such as transforms or script.
Should the image be an HTML img element instead?
Use an HTML image when the picture is content that needs alternative text, semantic placement or independent loading behavior. Use a CSS background for decorative presentation that supports surrounding content.
How do I make a fixed background printer-friendly?
Assume the background may be omitted in print. Supply readable foreground content and add an @media print rule with solid colors and any necessary spacing.
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.
