In this chapter you will learn:
About background-attachment
Values of background-attachment
Background-attachment is one of the most important properties of CSS which is used to specify that the background image will scroll with the content of the page or fixed. It has three values which are optional so you can use according to your requirement.
Values of background-attachment| Value | Description | Example |
|---|---|---|
| Fixed | When you want to fix the background image then you can use this property with background-attachment. It will not scroll when you scroll the content of the web page. | body {background-attachment:fixed; } |
| Scroll | As its name suggest it is used when you want to scroll the background image with the content of the web page. Such as when you scroll the page to read its content you will get that the background image of the page is also scrolling. It is the default value of background-attachment. | body {background-attachment:scroll; } |
| Local | This property value is same as scroll because when you use this value to set the background-attachment then you get that the output is similar to scroll so when you scroll the content of the web page the background image also scroll. | body {background-attachment:local; } |
Note:-
i) Mostly two values fixed and scroll are used to set the background image because we need to fix the background image or scroll with content.
ii) Scroll is the default value of background-attachment property.
Summary
In this chapter, you have learned about the background-attachment property of CSS so now try to use this property in your web pages and click on Next button to continue-