Fixed Background
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.
Example 1: background-attachment:fixed
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).
| Source Code | Result |
|---|---|
|
In this example, we'll add plenty of text so that the outer 'div' will develop scrollbars. We'll also need to add 'overflow:scroll' to our code in order to tell the browser to grow scrollbars when the contents are too big to fit inside. Heck, while we're at it, let's increase the text size and line height too - not to mention reduce the size of the container! |
Example 2: background-attachment:scroll
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.
| Source Code | Result |
|---|---|
|
In this example, we'll add plenty of text so that the outer 'div' will develop scrollbars. We'll also need to add 'overflow:scroll' to our code in order to tell the browser to grow scrollbars when the contents are too big to fit inside. Heck, while we're at it, let's increase the text size and line height too - not to mention reduce the size of the container! |
Example 3: background-attachment:local
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 <div> element.
Note that at the time of writing, browser support for background-attachment:local was limited to non-existent.
| Source Code | Result |
|---|---|
|
In this example, we'll add plenty of text so that the outer 'div' will develop scrollbars. We'll also need to add 'overflow:scroll' to our code in order to tell the browser to grow scrollbars when the contents are too big to fit inside. Heck, while we're at it, let's increase the text size and line height too - not to mention reduce the size of the container! |
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 background-attachment property:
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.
The background Property
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.
Background Fixed
| Source Code | Result |
|---|---|
|
HTML background image example
|
Background Scroll
| Source Code | Result |
|---|---|
|
HTML background image example
|