Background-attachment property

Category: Web Development & Approved by On January-29-2021 07:29:44

Background-attachment Property

The background-attachment property set whether the background image position is to be fixed within the viewport or scroll in the containing block.
Values description:

  1. fixed
    The background image position is fixed to the viewport, even the elements have scroll functioning. This value doesn’t work with background-clip: text;

  2. local
    The background image position is fixed to the elements content. If the elements have scroll functioning, than image will move with the elements content, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them.

  3. scroll
    The background image will scrolls with the main view, but stays fixed inside the local view.

Let see a syntax for all values of background-attachment property.
“Global value”
background-attachment: intital;
background-attachment: inherit;
background-attachment: unset;
“Keyword Value”
background-attachment: fixed;
background-attachment: local;
background-attachment: scroll;

Code Example:

We have made blog on CSS tutorial from basic, if you haven’t read them so Click Here


Share your thoughts about this post
web counter