As of iOS 5.0 (I'd been testing against 4.3 and 4.2), both fixed background-attachment, as well as fixed position on other elements works consistently with compliant desktop browsers; however, before this, pretty much no mobile browser correctly implemented fixed positioning. The reason is mobile browsers were begun as really desktop-lite browsers that would, for the sake of especially zooming (but of course therefore scrolling), essentially take a snapshot of the webpage and then let the browser's viewport be manipulated as a static image. This of course means that those elements that are fixed to the bottom of the page, or to fill the background of the page, actually only snapped to the bottom of or filled that initial, top-scrolled, rendering of the page, and when the page is scrolled, all those fixed elements are actually fixed to the first rendering of the page, and essentially totally un-fixed. As I said, iOS 5.x already correctly supports fixed. However, I can't say the same of other mobile browsers - even WebKit-based browsers such as those in Android devices.
For an early iteration of a mobile site I've been developing, I decided to use a lot of absolutely positioned divs to contain the header, primary, and footer content for the page (with the iScroll javascript plugin (
here), on especially the primary content container to accomplish scrolling of its overflowed contents - you can read through its well-written documentation for extrapolating what meaning you can from all that), which actually worked really well. Anyway, for the sake of getting a truly fixed background in also a relatively platform-independent manner, you've got your hands full - honestly, if you're not up to it, you may want to spend your ingeniousness in designing that uses the barer bones, but highly consistent mobile development technologies, and just tone down your design - mobile support of the cool stuff (even rudimentary cool stuff like fixed backgrounds) isn't what desktop support of the same after all. So, yeah. Not super helpful, but it's what I've discovered.
In sum: try taking control of the scrolling functionality of your mobile page, using something like iScroll (
here), and then you can basically design the rest the page assuming you don't want any top level elements extending beyond the viewport. So, you'll have something like the following (just for a scrollable page with a fixed background image):
<div id="i-get-attached-to-an-iscroll-js-object" style="position:absolute; top:0px; bottom:0px; left:0px; right:0px; background-image: none;">
<div id="i-get-filled-with-the-page-content">
...
</div>
</div>
<img id="i-hold-the-effectively-fixed-background-image" style="position:absolute; top:0px; bottom:0px; left:0px; right:0px;" src="whatevs"></img>
Clear as mud?
spelledlikeitsounds.com