Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to set a background image to be fixed with JavaScript DOM?
To set a background image to be fixed in JavaScript, use the backgroundAttachment property. This CSS property controls whether the background image scrolls with the content or remains fixed in the viewport.
Understanding backgroundAttachment
The backgroundAttachment property accepts three values:
-
"scroll"- Background scrolls with content (default) -
"fixed"- Background stays fixed relative to viewport -
"local"- Background scrolls with element's content
Syntax
element.style.backgroundAttachment = "fixed";
Example: Fixed Background Image
This example demonstrates how to set a fixed background image that won't scroll with the page content:
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; padding: 20px; }
p { margin: 20px 0; font-size: 18px; }
</style>
</head>
<body>
<button onclick="setFixedBackground()">Set Fixed Background</button>
<button onclick="setScrollingBackground()">Set Scrolling Background</button>
<p>Demo Text - Scroll down to see the effect</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<script>
function setFixedBackground() {
document.body.style.backgroundImage = "url('/html5/images/html5-mini-logo.jpg')";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundPosition = "right top";
document.body.style.backgroundAttachment = "fixed";
}
function setScrollingBackground() {
document.body.style.backgroundImage = "url('/html5/images/html5-mini-logo.jpg')";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundPosition = "right top";
document.body.style.backgroundAttachment = "scroll";
}
</script>
</body>
</html>
Setting Multiple Background Properties
For better control, set individual background properties separately:
<!DOCTYPE html>
<html>
<body>
<button onclick="setBackground()">Apply Fixed Background</button>
<p>Content that will scroll while background stays fixed</p>
<script>
function setBackground() {
const body = document.body;
// Set background properties individually
body.style.backgroundImage = "url('/html5/images/html5-mini-logo.jpg')";
body.style.backgroundSize = "200px 150px";
body.style.backgroundRepeat = "no-repeat";
body.style.backgroundPosition = "center";
body.style.backgroundAttachment = "fixed";
console.log("Background attachment:", body.style.backgroundAttachment);
}
</script>
</body>
</html>
Comparison of Background Attachment Values
| Value | Behavior | Use Case |
|---|---|---|
scroll |
Moves with content | Default behavior |
fixed |
Stays in viewport | Parallax effects |
local |
Scrolls with element | Scrollable containers |
Conclusion
Use backgroundAttachment: "fixed" to create backgrounds that remain stationary while content scrolls. This technique is commonly used for parallax effects and decorative backgrounds.
Updated on: 2026-03-15T23:18:59+05:30
708 Views
Advertisements