The Style backgroundAttachment property in HTML DOM is used to set or return whether the background image should be fixed or scroll with the content.
Syntax:
- It returns the backgroundAttachment property.
object.style.backgroundAttachment
- It is used to set the backgroundAttachment property.
object.style.backgroundAttachment = "scroll|fixed|local|initial|
inherit"
Return Values: It returns a string value, which representing how the background image is attached to the object within the document.
Property Values: Description of each property value with the example.
scroll: This value makes the background image scroll along with the element. It is the default value.
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style backgroundAttachment Property
</title>
<style>
body {
background: url(
no-repeat right top / 200px;
background-attachment: fixed;
}
#scrolling-area {
height: 1000px;
}
</style>
</head>
<body>
<h1 style="color: green; margin-top: 100px;">
GeeksforGeeks
</h1>
<b>DOM Style backgroundAttachment Property</b>
<p>
Click on the button to change the attachment
of the background image to 'scroll'.
</p>
<button onclick="changeAttachment()">
Change attachment
</button>
<div id="scrolling-area"><br>
This is a large area for scrolling.
</div>
<script>
function changeAttachment() {
document.body.style.backgroundAttachment
= 'scroll';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
fixed: This value makes the background image fixed with regard to the viewport.
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style backgroundAttachment Property
</title>
<style>
body {
background: url(
no-repeat right top / 200px;
}
#scrolling-area {
height: 1000px;
}
</style>
</head>
<body>
<h1 style="color: green; margin-top: 100px;">
GeeksforGeeks
</h1>
<b>DOM Style backgroundAttachment Property</b>
<p>
Click on the button to change the attachment
of the background image to 'scroll'.
</p>
<button onclick="changeAttachment()">
Change attachment
</button>
<div id="scrolling-area"><br>
This is a large area for scrolling.
</div>
<script>
function changeAttachment() {
document.body.style.backgroundAttachment
= 'fixed';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
local: This value makes the background image scroll along with the element’s content.
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style backgroundAttachment Property
</title>
<style>
body {
background: url(
no-repeat right top / 200px;
background-attachment: fixed;
}
#scrolling-area {
height: 1000px;
}
</style>
</head>
<body>
<h1 style="color: green; margin-top: 100px;">
GeeksforGeeks
</h1>
<b>DOM Style backgroundAttachment Property</b>
<p>
Click on the button to change the attachment
of the background image to 'scroll'.
</p>
<button onclick="changeAttachment()">
Change attachment
</button>
<div id="scrolling-area"><br>
This is a large area for scrolling.
</div>
<script>
function changeAttachment() {
document.body.style.backgroundAttachment
= 'local';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
initial: It is used to set this property to its default value.
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style backgroundAttachment Property
</title>
<style>
body {
background: url(
no-repeat right top / 200px;
background-attachment: fixed;
}
#scrolling-area {
height: 1000px;
}
</style>
</head>
<body>
<h1 style="color: green; margin-top: 100px;">
GeeksforGeeks
</h1>
<b>DOM Style backgroundAttachment Property</b>
<p>
Click on the button to change the attachment
of the background image to 'scroll'.
</p>
<button onclick="changeAttachment()">
Change attachment
</button>
<div id="scrolling-area"><br>
This is a large area for scrolling.
</div>
<script>
function changeAttachment() {
document.body.style.backgroundAttachment
= 'initial';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
inherit: It inherits the property from its parent element.
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style backgroundAttachment Property
</title>
<style>
.bg-img {
height: 150px;
background: url(
no-repeat right top / 200px;
}
#parent {
background-attachment: fixed;
height: 1000px;
}
</style>
</head>
<body>
<div id="parent">
<div class="bg-img"></div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
DOM Style backgroundAttachment Property
</b>
<p>
Click on the button to change the attachment
of the background image to 'inherit'.
</p>
<button onclick="changeAttachment()">
Change attachment
</button>
</div>
<script>
function changeAttachment() {
elem = document.querySelector('.bg-img');
elem.style.backgroundAttachment = 'inherit';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Supported Browsers: The browser supported by DOM Style backgroundAttachment property are listed below:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Internet Explorer 4.0 and above
- Firefox 1.0 and above
- Opera 3.5 and above
- Safari 1.0 and above