ホームページの背景画像を画面いっぱいで表示するよう

質問

ホームページの背景画像を画面いっぱいで表示するように
設定しようと考えています。
（jQueryのBACKSTRETCHなども考えています）
その場合、使用する画像のサイズ（縦・横）はどれくらいがよいのでしょうか？

どのＰＣでもしっかり画面いっぱいに表示するには
世の中にあるＰＣのディスプレイの最大を上回る大きさにするのでしょうか？

一般的にプロの人がホームページを作る場合、
画面いっぱいに背景を設定する際のサイズ（縦・横）を教えて頂けたらうれしいです。

どうぞよろしくお願い致します。

回答No.2

ORUKA1951 · ベストアンサー

CSS3でしたら、background-sizeが利用できます。
背景画像はコンテンツには無関係ですから、画質は悪いほうが良いです。(^^)
くっきりした画像でしたら、コンテンツに含まれる画像がかぶったり、文字が読みにくくなります。ウェブ開発で重要な事はWAIです。
　⇒WAIガイドライン:ページ制作( http://www.doraneko.org/wai/contents10/19980918/Overview.html )
　HTML,CSS,WAI,DOMなどを含めてウェブ標準なサイトを作ろうとします。特にWAIは無視できません。
　極めて淡いパステル調にします。(濃くして文字を白系統にすることもありますが、その場合は印刷用スタイルシートを用意します)
　写真の場合は思いっきりぼかします。
　スタイルシートは、mediatype="screen"を必ず指定します。

　サイズ的には、1024×768あたりが最大ですね。ページ自体は640-1024pxのリキッドで作成しますので、position:50% 50%;で中央におきます。CSS3対応のブラウザにはbackground-size:cover;などで覆い、fixedにします。

　ただたくさん作ってきましたが、fixedは無論、背景がでしゃばるサイトは好まれませんね。

お礼

ありがとうございました。大変参考になりました（＾＾）

回答No.1

roid_moon

大きく無い画像だと画質が悪くなるし、かといって安全策を取って大きくしすぎると、データが重くなるし。

一長一短ですよね。
これが正解、というのは無いので、何がベストかは人それぞれになると思います。

対象ブラウザをどこまでにするかによりますが、 私の場合は、小さいのと大きい画像２種類を用意して、ブラウザのウインドウサイズによって読み込む画像を変える方法を選ぶことが多いです。

小さい画像はw1000×h700くらい、大きい画像はその倍くらいのことが多いです。
個人的にはフルサイズ背景で高精細で見せる必要性って、そんなに感じません。
きれいな画像を目立たせて、しかもサクサク動くことを重視したら、これくらいのサイズで十分だと思っています。

あくまでも私の個人的な意見なので、参考になるといいんですけど。

お礼

ありがとうございます。大変参考になりました（＾＾）