HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
A background-image that will not scroll with the page (fixed)
The background-attachment property sets whether a background image
scrolls with the rest of the page, or is fixed.
| Default value: | scroll |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS1 |
| JavaScript syntax: | object.style.backgroundAttachment="fixed" Try it |
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| background-attachment | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
| Value | Description |
|---|---|
| scroll | The background image will scroll with the page. This is default |
| fixed | The background image will not scroll with the page |
| local | The background image will scroll with the element's contents |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
A background-image that will scroll with the page (scroll). This is default:
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: scroll;
}
How to create a simple parallax scrolling effect (create an illusion of 3D depth):
.fixed-bg {
/* The background image */
background-image: url("img_tree.gif");
/* Set a specified height, or the minimum height for the background image */
min-height: 500px;
/* Set background image to fixed (don't scroll along with the page) */
background-attachment: fixed;
/* Center the background image */
background-position: center;
/* Set the background image to no repeat */
background-repeat: no-repeat;
/* Scale the background image to be as large as possible */
background-size: cover;
}
CSS tutorial: CSS Background
HTML DOM reference: backgroundAttachment property