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 CodeResult

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 CodeResult

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 CodeResult

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 CodeResult
HTML background image example

Background Scroll

Source CodeResult
HTML background image example

About HTML.am

HTML.am was created in order to provide HTML tools, codes, tutorials, and other resources to help webmasters create and maintain their HTML documents.

HTML.am aims primarily at beginners, but may also be useful to web professionals.

About the HTML Codes

The HTML codes on this website are provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

Need Hosting?

Our partner site ZappyHost provides website hosting, domain names and related products at some of the best prices on the web. If you need web hosting, check them out!