巨大なサイズの背景画像を使用したい
ブラウザごとに限界値がある
background-imageで巨大なサイズの画像を読み込ませるとき、ブラウザによっては表示できなかったり、イレギュラーな表示をする場合があります。
リピートさせずに表示させたいとき、Safari(iOS)とFirefoxは要注意。
特にSafariでは別名2メガバイト問題などと呼ばれるそうです。
Safari (iOS)
画像の高さ × 幅 < 2 × 1024 × 1024 (2M byte)
この基準を超えると、表示はされるものの、縮小かつリピートされた状態で表示されてしまいます。 background-sizeを指定しても効果なし。
Firefox
画像の高さ × 幅 = 700 × 25000 (約17M byte)
までなら表示されることを確認。 これを超えると(僕が経験したのは約39メガバイトですが)、完全に画像を読み込めなくなり、表示しません。
Firebugで対象の要素を検証すると「画像を読み込めませんでした」というメッセージ。
IE, Chrome, Opera, Safari (Windows)は、39メガバイトでも表示されましたが、一説によるとIEにも限界値があるとかないとか。
サイズが2メガバイトを超えないような画像を使用するのが、最も手っ取り早い解決策です。
ちなみにSafariにおける上記事例では、CSSスプライトアニメーションのため非常に長い画像を使用していたのですが、2メガバイトを超えないようにシーンごとに何枚も切り分けました。