An underrated, as well as quite useful, CSS property is the background-attachment property.
Using the background-attachment property in CSS gives the web designer more control of their website, allowing them to create the perfect feel and movement to the page.
One can make their background scrolling, fixed, or local just by using this simple property and its different values.
Here are three ways the background-attachment property can be used:
Scroll
The default setting for any background image one may apply to their website is scrolling. This means that as a user scrolls down a web page, they are also moving down the background image at the same rate. The syntax for this property is as follows:
background-attachment: scroll;
Above is embedded a codepen with the property, background-image, set to the value, scroll.
As one can see, it seems like any other normal web page, with the image in the background moving upward along with the text as the user scrolls downward.
This is a useful, go-to approach when designing a website, unless the web-designer wants something more unique.
Fixed
The fixed value for this property forces a background image to stick to the same position on a screen, no matter where the user scrolls.
The syntax for this is as follows:
background-attachment: fixed;
Above is shown an example of a fixed background image, with the picture of the elephant staying in place whether one scrolls up or down.
This is very useful for a more unique look to a website, especially when someone wants to show off an important or beautiful photo.
Local
The local value will cause the chosen image to scroll with its element’s contents.
For example, if one has a div element they want to add an image to and have that image stay attached, the local value is a good idea.
The syntax for this is as follows:
background-attachment: local;
The code above shows the first paragraph from the other pens now contained in a separate div element, with an id of “p1“.
The elephant image was added to be the background of p1, and then the background-attachment property was given the value of local.
This means that the image is now attached to its element’s contents, and will scroll along with them, always staying in place.
Conclusion
There are three easy ways to manipulate the position of a background while the user is scrolling a website: scroll, fixed, and local values.
By using the background-attachment property, a web page can either have a default, common look and feel with scrolling, or more unique looks with fixed and local values. These latter values generally are for putting emphasis on a special background image, one that the builder of the website wants users to keep looking at.
This underrated property can make a big difference to a site. By practicing using different CSS properties such as this one, a hopeful web designer can become more flexible and knowledgeable about building an amazing website.