Printer Friendly Version

BellaOnline's HTML Editor

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.

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

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.

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 (:).

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!

HTML Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 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 Editor Wanted for details.

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor