HTML and CSS Reference
In-Depth Information
Background attachment
The background-attachment property determines what happens to an
image when the user scrolls the page. The three available properties are
scroll , fixed and inherit . Inherit simply tells the element to follow
the background-attachment property of its parent.
To understand background-attachment properly, we need to first think
of how the page and view port interact. The view port is the section of your
browser that displays the Web page (think of it like your browser but without
all the toolbars). The view port is set in its position and never moves.
When you scroll down a Web page, the view port does not move. Instead,
the content of the page scrolls upward. This makes it seem as if the view
port is scrolling down the page. Now, when we set background-
attachment:scroll;, we are telling the background that when the element
scrolls, the background must scroll with it. In simpler terms, the background
sticks to the element. This is the default setting for background-
attachment .
Let's see an example to make it clearer:
background-image: url(test-image.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-attachment: scroll;
Search WWH ::




Custom Search