We have a Drupal site that uses a fixed gradient background. The gradient goes from dark at the top to lighter at the bottom. On long scrolling pages of tables with white text, we want the darker portion of the background under the text for readability.
The experience for the user is that when they scroll down, the x-repeated background image remains fixed at the top of their browser window (the viewport) so that the white text is readable on their device.
It works on desktop browsers but when viewed on the iPhone, it ignores the "position: fixed;". I don't know about Android or Microsoft.
Is there a hack or different css selector or class for this? This is not a mobile site at this time, but for now it is important for mobile viewers to view the site correctly.