This lesson shows us how to "fix" a background image with the background-attachment property so that it does not scroll with the page.
The form for the background-attachment property is:
background-attachment: value
The possibles values are scroll (default) and fixed.
scroll makes the image scroll with the page. This is the default.
fixed makes the image stay in the same place on your screen, even when the page is scrolled.
The background-position property is meant to place a single instance of your background image.
If you use an internal stylesheet, just add the background-attachment property to your stylesheet.
This sample head section shows how to use an external stylesheet for your main styling and an additional internal stylesheet for your background image. You may not have a background-image in the external stylesheet to use this code.
<link rel="stylesheet" href="style2.css" type="text/css" />
<style type="text/css">
<!--
body {
background-image: url(URL_of_image);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
-->
</style>
When you use background-attahcment: fixed WebTV will repsond differently depending on your background-repeat value.
When background-repeat is set to no-repeat or repeat-y, your background image will be fixed for WebTV viewers.
When background-repeat is set to repeat-x or repeat, your background image will scroll with the rest of your page for WebTV viewers.
These demo pages use the background-attachment property. The screenshots show the page scrolled to different positions.
No repeat
Demo page 1: centered image
Demo page 2: left center position
Repeat
Demo page 3: repeat-x
Demo page 4: repeat-y
Demo page 5: repeat
There is no assignment for this lesson, but you may use background-attachment in a sample page if you would like to see some pc screenshots of your page.
Happy coding!
Gnubee
