The Cascading Style Sheets Background Attachment Property

The Cascading Style Sheets Background Attachment Property
The Cascading Style Sheets background-attachment property is used to control how the background image will behave on the webpage.
With CSS you can set the background image to move with the webpage as it scrolls (scroll) or to always remain visible as the page scrolls (fixed).

Let's take a look at an example.

Example
<style type="text/css">
<!--
body {background-attachment: scroll}
-->
</style>


Selector
body
To control a background image on your webpage you would use the body selector in the HTML <body> tag to tell the web browser to apply this style to the background image of the entire webpage.

Property
background-attachment
The background-attachment is the attribute used to tell the web browser how to control the behavior of the background image. The property name, background-attachment, is followed by a colon (:).

Value
scroll
On the right side of the colon is the value for the background-attachment attribute. In our example, we want the image to scroll with the webpage. So we have set the value to scroll. In this case the background image will scroll as the webpage scrolls and the image will eventually disappear from view. If we wanted the background image to always remain visible as the webpage scrolls, you would set the value to fixed.






This site needs an editor - click to learn more!



RSS
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map





Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.