View video tutorial
CSS Background Attachment
CSS
This specifies whether the background image should scroll or be fixed on the page.
CSS background-attachment
➔ The background-attachment property specifies whether the background image should be scrollable or fixed to the page.
Syntax
background-attachment: scroll | fixed | local | initial | inherit;
Property values
| Value | Description |
|---|---|
| scroll | The background image scrolls with the element's content and the page, which is the default behavior. |
| fixed | The background image remains fixed relative to the viewport and does not move as the page scrolls. |
| local | The background image scrolls with the content of the element, meaning if the element itself has a scrollbar, the background will move within the view of that scrollbar. |
| initial | Sets the property to its default value (scroll). |
| inherit | The element inherits the background-attachment value from its parent element. |
Example
body {
background-image: url('resources/images/flowers-tulip-t.png');
background-repeat: no-repeat;
background-position: right top;
margin-right: 50px;
background-attachment: fixed;
}Click on the "Try it Now" button to see how it works.
Example (fixed)
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS background-attachment Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<style>
body {
background-image: url('resources/images/fruits-blackberry-t.png');
background-repeat: no-repeat;
background-position: center;
margin-right: 50px;
background-attachment: fixed;
background-color: #10aaaa;
}
p {
margin: 60px 5px;
}
</style>
</head>
<body>
<h1>CSS background-attachment Example</h1>
<p>Blackberries are abundantly available, both wild and commercially, in several countries, the most notable of
which are:</p>
<p>Mexico: Currently the world's leading blackberry producer and exporter.
<p>United States: Especially in Oregon, which is a major commercial producer. Wild blackberries are also abundant in
the Pacific Northwest.</p>
<p>United Kingdom: Wild blackberries are very common, growing in hedgerows and woodlands throughout the country.</p>
<p>Australia: Considered a major invasive weed, European blackberry is found in abundance in temperate regions.</p>
<p>Chile: A significant producer and exporter of berries, where they can also be found growing wild.</p>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Sample Code
Copy each file contents and paste it to your own project and run to see the final output
Example
body {
background-image: url('resources/images/flowers-sunflower-t.png');
background-repeat: no-repeat;
background-position: right top;
margin-right: 50px;
background-attachment: scroll;
}Click on the "Try it Now" button to see how it works.
Example (scroll)
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS background-attachment Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<style>
body {
background-image: url('resources/images/fruits-blackberry-t.png');
background-repeat: no-repeat;
background-position: center;
margin-right: 50px;
background-attachment: scroll;
background-color: #10aaaa;
}
p {
margin: 60px 5px;
}
</style>
</head>
<body>
<h1>CSS background-attachment Example</h1>
<p>Blackberries are abundantly available, both wild and commercially, in several countries, the most notable of
which are:</p>
<p>Mexico: Currently the world's leading blackberry producer and exporter.
<p>United States: Especially in Oregon, which is a major commercial producer. Wild blackberries are also abundant in
the Pacific Northwest.</p>
<p>United Kingdom: Wild blackberries are very common, growing in hedgerows and woodlands throughout the country.</p>
<p>Australia: Considered a major invasive weed, European blackberry is found in abundance in temperate regions.</p>
<p>Chile: A significant producer and exporter of berries, where they can also be found growing wild.</p>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.