• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 14. Background Properties > background-attachment Property

14.4. background-attachment Property

The background-attachment property is designed to set how the background image should move when the browser window is scrolled. When you scroll a page in a browser, the typical behavior for the background is that it, the text and any other elements on the Web page scroll in unison. With the background-attachment property, you have another choice.

The background-attachment property is always associated with background-image and it can take one of two possible values: scroll and fixed. The scroll value is the default, and is what you typically see when you scroll any Web page with a background image — the background scrolls with you. The fixed value is supposed to keep the background in place while the browser moves the text and other elements of the Web page instead. It can also take on an inherit value, which adopts whatever parent value may be available. You can see the effect of this in Figure 14-6, derived from the code in Listing 14.4: the text in Internet Explorer scrolls, but the background does not. The effect makes it seem as though the text is “floating” above the background image.

Listing 14.4. background-attachment: fixed Example

<title>A PRINCESS OF MARS by Edgar Rice Burroughs (background-attachment Example)</title>
body {background-image: url(mars-surface.jpg); background-attachment: fixed}
p {color: white; font-weight: bold}
<h1>A PRINCESS OF MARS by Edgar Rice Burroughs</h1>
<h2>CHAPTER III</h2>
I opened my eyes upon a strange and weird landscape.  I knew that 
I was on Mars; not once did I question either my sanity or my 
wakefulness.  I was not asleep, no need for pinching here; my inner 
consciousness told me as plainly that I was upon Mars as your 
conscious mind tells you that you are upon Earth.  You do not 
question the fact; neither did I.
I found myself lying prone upon a bed of yellowish, mosslike
vegetation which stretched around me in all directions for 
interminable miles.  I seemed to be lying in a deep, circular
basin, along the outer verge of which I could distinguish the
irregularities of low hills.
It was midday, the sun was shining full upon me and the heat of it
was rather intense upon my naked body, yet no greater than would 
have been true under similar conditions on an Arizona desert.  
Here and there were slight outcroppings of quartz-bearing rock 
which glistened in the sunlight; and a little to my left, perhaps 
a hundred yards, appeared a low, walled enclosure about four feet
in height.  No water, and no other vegetation than the moss was 
in evidence, and as I was somewhat thirsty I determined to do a 
little exploring.
Springing to my feet I received my first Martian surprise, for the
effort, which on Earth would have brought me standing upright, 
carried me into the Martian air to the height of about three yards.
I alighted softly upon the ground, however, without appreciable 
shock or jar.  Now commenced a series of evolutions which even 
then seemed ludicrous in the extreme. I found that I must learn to 
walk all over again, as the muscular exertion which carried me 
easily and safely upon Earth played strange antics with me upon 
Instead of progressing in a sane and dignified manner, my attempts 
to walk resulted in a variety of hops which took me clear of the 
ground a couple of feet at each step and landed me sprawling upon
my face or back at the end of each second or third hop.  My 
muscles, perfectly attuned and accustomed to the force of gravity
on Earth, played the mischief with me in attempting for the first
time to cope with the lesser gravitation and lower air pressure on


Figure 14-6. background-attachment: fixed example code as displayed within Internet Explorer 6.0 as the page is scrolled.

Although it has been around for awhile, the bgproperties="fixed" attribute for the body element is little used, so many users are initially surprised when they see the effect in action. When put into effect (using either HTML or CSS) this “trick” can actually be a little unsettling to the viewer, so it is best used sparingly. In addition, as when choosing any background image, make sure that you are choosing one that will not interfere with the readability of your text.

While it is possible to add this property to other elements on a Web page, it really only makes sense to add the background-attachment property to any property where scrolling is involved, such as the body and textarea elements.

Browser Compatibility

Beginning as early as Internet Explorer 2.0, there was a browser-specific HTML equivalent for this CSS property: <body bgproperties="fixed">. As it was an attribute of the body element introduced into Internet Explorer, it was not supported in versions of Netscape Navigator (or any other browser for that matter). Not surprisingly then, up until the most recent versions of Netscape Navigator, this CSS equivalent property only supported the default fixed value.

  • Internet Explorer 3.0: Unsafe

  • Internet Explorer 4.0: Safe

  • Internet Explorer 4.0 – 4.5 (Mac): Safe

  • Internet Explorer 5.0: Safe

  • Internet Explorer 5.1 – 5.2 (Mac): Safe.

  • Internet Explorer 5.5: Safe

  • Internet Explorer 6.0: Safe

  • Netscape Navigator 4.0 – 4.79: Partial. Only supports the default fixed value; scroll is not supported, and it behaves as if the value were fixed.

  • Netscape Navigator 4.0 (Mac & UNIX): Partial. Same as above.

  • Netscape Navigator 6.0: Safe.

  • Netscape Navigator 7.0: Safe.

  • Mozilla 1.0: Safe.

  • Opera 3.6: Safe

  • Opera 5.0: Safe

  • Opera 6.0: Safe

  • Konqueror: Safe.

The background-attachment property has been implemented in Internet Explorer since version 4.0.

Netscape Navigator is rated as Partial because it only supports the default fixed value; scroll is not supported, and it behaves as if the value were set to fixed. While it is rated only as Partial here, strictly speaking its behavior does not have to implement this feature according to the specification — so while it is not necessarily in error, it does not perform as some Web authors might expect, hence the Partial rating. This situation was taken care of with the release of Netscape Navigator 6.0 (and Mozilla 1.0), which now displays the effects of the scroll value.

Opera has correctly interpreted this property since version 3.6.

Konqueror also correctly interprets this property.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint