シームレスにウェブページ上の大きな背景画像を使用します

Question

私は私のサイトではなく、それらと背景負荷として醜い探してサイトをダウンロードするユーザーに苦労を与えることなく、巨大な背景画像を持っていると思います。

しかし彼らはそれがキロバイト/メガバイトの面で言うのは難しいですが、サイズは1920×1080よりも大きくなるんでしょう。

どのようなここに私のオプションであり、最も効果的である？

の私は、帯域幅についてあまり気にしませんだだけですべてが良さそうだと思いますし、ユーザーにしたい;）の

Answer 1

1つのオプションは、複数の背景を使用することです。下の層のような小さなバックグラウンドを持ち、大きなバックグラウンドでそれをカバーしています。

あなたがの体にそれをしたいとはIEをサポートしたい場合は、

2つの背景を持ってするのが難しいかもしれません。それがロードされるとソリューションは、高解像度の低解像度の背景を変更するには、小さなボディ背景使用JSを開始するかもしれません。

var i = new Image();
i.onload = function(){document.body.style.backgroundImage = 'url(' + i.src + ')';}
i.src = 'gigantic.jpg';

<時間>

このような大規模な背景には、いくつかのモバイルブラウザは、（事前3GSはすべてでそのような画像をデコードすることを拒否するか、またはパニックでキャッシュ/タブの内容をパージ開始しますiPhoneを）持っているよりも多くのRAMを必要としていることに注意してください。

後者の問題は、CSSメディアクエリを回避することができます：

http://lofotenmoose.info/css/destroy/media-クエリ・背景・ストレッチ/ の

クエリmax-device-widthの代わりに、（仮想/ズーム）max-width除きます。