Background image fix: the property ‘background-attachment’
The background-attachment property specifies whether a background image can scrolled or not. A fixed background image is for a reader who does not neet to scroll the text, while a not-fixed allows you to slide the contents of the page.
background-attachment: scroll the image scrolls with the page
background-attachment: fixed image display
The following code defines the fixed background image.
body (
background-color: # FFCC66;
background-image: url ( “butterfly.gif”);
background-repeat: no-repeat;
background-attachment: fixed;
)
h1 (
color: # 990000;
background-color: # FC9804;
)
Positioning the background image: the property ‘background-position’
By default, the background image is set in the upper left corner of the screen. The background-position property lets you change this and the picture according to your wishes.
There are several ways in which the background-position can be assigned values. They all have in common that use as a pair of coordinates. For example the value ’100px 200px’ positions the background image in the browser window 100 pixels from the left side and 200 pixels from the top. These coordinates can be used as a percentage of screen width, fixed size (pixels, centimeters, etc.) or with the words top (top), bottom (bottom), center (centered), left (left) and right (right).