The CSS background-attachment property is used to define if the background-image is fixed, or it will scroll along with the rest of the page. It is one of the CSS3 properties.
- The Background-attachment property includes the following values.
- scroll
- fixed
- local
- initial
- inherit
Background-attachment Characteristics:
| Initial value | scroll |
| Applies to | All elements. It also applies to ::first-letter and ::first-line |
| Inherited | No |
| Animatable | No |
| Version | CSS1 |
| JavaScript syntax | object.style.backgroundAttachment = "scroll"; |
Syntax:
background-attachment: scroll | fixed | local | initial | inherit; Values:
| Value | Description |
|---|---|
| scroll | It is a default value. This value makes the background image scroll along with the element. |
| fixed | This value will fix the background image. |
| local | It will scroll the background image along with the element's contents. |
| initial | This will set the property to its default value. |
| inherit | Inherits the property from its parent element. |
Example of Background-attachment property:
In the following code, we use background-attachment property with scroll value. Thus, the background image scrolls with the page.
<!DOCTYPE html> <html> <head> <title>The title of the document</title> <style> body { background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png"); background-repeat: no-repeat; background-attachment: scroll; background-size: 500px 100px; } </style> </head> <body> <h2>Background-attachment Example</h2> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>The background-image scrolls with the page. Try to scroll down.</p> <p>If you do not see any scrollbars, try to resize the browser window.</p> </body> </html> Result:
By running the above code, you will get the output as shown as below.
Example of the background-attachment property with the fixed value:
In the below code, the background image is "fixed", so it will not move with the page.
<!DOCTYPE html> <html> <head> <title>The title of the document</title> <style> body { background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png"); background-repeat: no-repeat; background-attachment: fixed; background-size: 500px 100px; } </style> </head> <body> <h2>Background-attachment example</h2> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>If you do not see any scrollbars, try to resize the browser window.</p> </body> </html> Result:
Now, you will see the result as shown in the below image.
Example of the background-attachment property with a disappearing fixed background image:
This code will disappear the fixed background image.
<!DOCTYPE html> <html> <head> <title>The title of the document</title> <style> .example { background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png"); min-height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } </style> </head> <body> <h2>Background-attachment example</h2> <p> Scroll the page to see the effect. </p> <div class="example"></div> <div style="height:800px;background-color:#FD8D8B;"></div> </body> </html> Result:
You will get the result of the above code as shown in the below image.
Browser-Support:
The post CSS background-attachment Property appeared first on Share Point Anchor.
Top comments (0)