The background-attachment property is used in combination with the background-image property; in other words if there is an image specified as background then the background-attachment property defines whether the image will be fixed with regard to the viewport, or it will scroll along with the containing block.
The background-attachment property contains following information:
- value: scroll, fixed or inherit;
- initial: scroll;
- applies to: all elements;
- inherited: no;
- percentages: N/A;
- media: visual;
- computed value: as specified.
Due to the fact that there is only one viewport per view, if an element has a scrolling enabled (overflow property), a fixed background does not move with the element and a scrollbackground does not move with the scrolling system.
In case of the image being fixed there is a chance of having part of the image (or all) invisible. That will happen when there are paddings or borders existing on the containing block, or perhaps the content is displaced (see "visual formatting model"). Such a scenario may be fixed with making the image tiled with the background-repeat property.
CSS background-attachment property example: