I've set up a background image that is scaled to fit inside its container, with fallbacks in place for browsers that do not support background-size when detected by Modernizr.
.wrap {
width: 200px;
height: 116px;
position: absolute;
background-image: url(image.jpg);
background-attachment: fixed;
background-position: 0 0;
background-size: 200px 116px;
background-repeat: no-repeat;
}
For an example, you can view it here: http://jsfiddle.net/crowjonah/6xYNm/
The design looks great on Chrome, Firefox, Safari (desktop and iOS), but I'm experiencing issues on certain Android devices.
Here is the User Agent (UA) for a device displaying correctly:
Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; Xoom Build/IMM76L) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30
And here's the UA for a device that isn't displaying correctly:
Mozilla/5.0 (Linux; U; Android 4.2.2; en-us; sdk Build/JB_MR1.1) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
In newer versions of Android (emulated), the fixed background image is scaled inaccurately and appears pixelated to accommodate the viewport size rather than respecting the container dimensions or the defined background-size.
This behavior aligns with what MDN explains:
If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present.
My challenge lies in predicting when this behavior will occur so I can make appropriate adjustments. Due to the layout and animations of my page, I prefer a fixed background for compatible browsers and am willing to use scroll as an alternative for these rare cases if targeting them specifically is possible.
Update (10/3/2013): To provide clarity, I have updated the fiddle to showcase a more complex and problematic scenario that justifies the CSS properties I have implemented: http://jsfiddle.net/crowjonah/QtpVN/