background-attachment: fixed; slows scrolling down in Firefox 3.x

body{
  background-image: URL("someimage.jpg");
  background-position: fixed;
}

This makes scrolling in Firefox really slow. Is there a way to ach开发者_开发问答ieve a large centered background image with "fixed" attachment, with which scrolling in Firefox works as well as if attachment was set to "scroll".

Thanks for any CSS / JS help!

---

Try background-attachment: fixed; instead.

---

Have you tried using a smaller resolution background image? That might make a difference, because the method you are using a valid and good one in my opinion.

---

You're missing a "background-position:" declaration. That might slow down the rendering process.

---

The best fix for this firefox behaviour is actually to use a little trick:

1. position the supposed background image as an img element inside a layer above your content layer
2. use css to position the content above and both layers exactly at top 0, left 0, the upper left corner of the window
3. utilize jquery to resize the img to the window width and height
4. use height 100% for the content and overflow: scroll

Now use css to position both layers absolute on top: 0 and left: 0 and use the z-index to position the content layer visible above the background image layer. By using jQuery you can resize the background image on load (.ready) and on window resize ($(window).resize) to fit the actual screen resolution. The content layer gets an scroll overflow and there you go. This workaround actually fixes any performance issues on firefox 3.x, but requires the use of jQuery.