This page contains HTML code to create a fixed background on your website or blog. That is, a fixed background image that doesn't scroll when you scroll the page.
This example demonstrates a background image that has been fixed using
background-attachment:fixed; (along with the
background-image property to define the actual image).
In this example, we'll use the code
background-attachment:scroll; in order to make the background image scroll as we use the browser's scrollbars.
In this example, we use the code
background-attachment:local in order to make the background image scroll as we use the scrollbars on the HTML
Note that at the time of writing, browser support for
background-attachment:local was limited to non-existent.
Fixed Background Behavior
Now at this point, you may be wondering if the above examples are working correctly. I say this because, on the second example, the background image doesn't seem to scroll as you scroll through the contents of the element. And you may have noticed that the "fixed" example behaves strangely when you scroll your window up or down. It might appear as a kind of "window", where you see a different part of the background image as you scroll the page.
And the third example might not have done anything different.
If you didn't notice this, i't's possible that your browser displays background images differently, however, here is what the W3C says about the
If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed') or scrolls along with the containing block ('scroll').
Therefore, your background image is fixed or scrolls along with the whole document - not just a single element within that document (i.e. a scrolling
<div>). However, if you use frames or an inline frame, then the background image should be fixed or scroll as you scroll through that particular frame.
In our third example, using
background-attachment:local should make the background image scroll along with the HTML element that contains it. At the time of writing, no browser supports this element.
As mentioned earlier, the CSS
background property allows you to add all your background related properties all in one go. This is a more efficient way to code your background image properties.
Here's an example of using the
background property. In this example, I've removed the scroll bars, simply to demonstrate that they're not really needed in order to view the effect of this property - unless you're using CSS3's
local as per the discussion above.