Fixing the Position of Background Images with CSS

A background image can be made to remain in one position or move when a page is scrolled up or down. The background-attachment property is the property that is used to do this. It is non-inherited and the standard values it supports are fixed (which makes the image remain in one position) and scroll (the default value, which makes the image move up and down as the page is scrolled up and down). Figure 15.38 shows how the property is used and Figure 15.39 the effect during scrolling.

In the example, the background-image property specifies the image to use for the <body> element’s background, the background-repeat property says not to repeat it, the background-attachment property says to make its position fixed, and padding specifies the space between all the contents of the <body> element and the border of the element’s box. In Figure 15.39, notice that the heading is scrolling off screen while the background image remains at the top-left comer of the window.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *