CSS background-attachment Property
CSS background-attachment Property
CSS background-attachment property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
body{
height:800px;
}
#parent{
background-image: url("ocean.jpg");
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
background-position: center;
height: 300px;
color: #fff;
overflow-y: scroll;
}
#child{
line-height: 4;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
<h1>CSS background-attachment Property</h1>
<p>CSS background-attachment to 'scroll'.</p>
<p>First, scroll the div</p>
<p>Some more content</p>
<p>Some more content</p>
<p>Some more content</p>
</div>
</div>
</body>
</html>
Syntax
Using CSS
element{
background-attachment: scroll;
}
Using Javascript
object.style.backgroundAttachment="scroll";
Animatable
No, background-attachment property is not animatable. CSS Animatable Properties Reference.
Default Value
Default value for CSS background-attachment property is scroll.
Property Value
The following table provides a list of values for CSS background-attachment property.
| Value | Explanation |
|---|
| scroll | The background image will scroll with the page. |
| fixed | The background image will not scroll with the page. |
| local | The background image will scroll with the element's contents. |
Using fixed
In the following example, the background image is fixed while scrolling.
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
body{
height: 800px;
}
#parent{
background-image: url("ocean.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center;
height: 300px;
color: #fff;
overflow-y: scroll;
}
#child{
line-height: 4;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
<h1>CSS background-attachment Property</h1>
<p>CSS background-attachment to 'scroll'.</p>
<p>First, scroll the div</p>
<p>Some more content</p>
<p>Some more content</p>
<p>Some more content</p>
</div>
</div>
</body>
</html>
Using local
In the following example, the background image will scroll with the element's contents.
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
body{
height: 800px;
}
#parent{
background-image: url("ocean.jpg");
background-repeat: no-repeat;
background-attachment: local;
background-size: cover;
background-position: center;
height: 300px;
color: #fff;
overflow-y: scroll;
}
#child{
line-height: 4;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
<h1>CSS background-attachment Property</h1>
<p>CSS background-attachment to 'scroll'.</p>
<p>First, scroll the div</p>
<p>Some more content</p>
<p>Some more content</p>
<p>Some more content</p>
</div>
</div>
</body>
</html>
Using JavaScript
In the following example, we will demonstrate how to change the CSS background-attachment property of an element using JavaScript.
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
body{
height: 800px;
}
#parent{
background-image: url("ocean.jpg");
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
background-position: center;
height: 300px;
color: #fff;
overflow-y: scroll;
}
#child{
line-height: 4;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
<h1>CSS background-attachment Property</h1>
<p>CSS background-attachment to 'scroll'.</p>
<p>First, scroll the div</p>
<p>Some more content</p>
<p>Some more content</p>
<p>Some more content</p>
</div>
</div>
<button onclick="myFunction()">Click Me</button>
<script>
var x = document.getElementById("parent");
function myFunction(){
x.style.backgroundAttachment = "fixed";
}
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
Share this Page
Meet the Author
