ブログの背景画像のサイズを固定したいです

質問

宜しくお願いします。

ブログの背景画像を変更したく、一枚の写真（フリー素材です）を使用しブログの背景に設定したのですが、スマートフォンの所謂PC表示にすると画像が拡大してしまいぼやけた状態になってしまいます。

デスクトップ、ラップトップPCのブラウザですと普通に表示されます。

スマホ用PCブラウザではなぜか画像が異常に引き伸ばされてしまうのです。

CSSではライブドアブログのかんたん背景画像という機能を使用しており、

/* かんたん背景画像 */
body.show-bg-image {
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;

のように設定されています。

スマートフォン用のPCブラウザからでもデスクトップPCブラウザで見たときのように画像を固定（一枚絵）し、サイズもスマートフォン向けPCブラウザで見たときに適合するようにしたいのですが方法が分かりません。

自分でも色々調べ、リピートの設定やスクロール、コンテイン等をいじってみましたが素人知識ではまったく改善されず困っております。

お詳しい方是非ご教授、お力添えを頂きたく存じます。

宜しくお願い致します。

回答No.2

noname#217950 · ベストアンサー

ちょっと念のために補足なんですが。

>スマホのPCビューに対して画像が高解像度すぎた

と、ありますが、私が言ったのは逆で画像が低解像度すぎるのでは？という意味です。

たとえばiPhone5のRetinaディスプレイはPCと比べて2倍程度のサイズの画像を用意してやらないとぼやけます。さらに最新のスマートフォンの場合3倍以上の物もあります。

ご存知かと思いますが、PCでもスマホでも、ディスプレイは細かい点がたくさん並んで文字や画像を描いていますよね。
iPhone5の例を挙げるとこの細かい点がPCのディスプレイに比べて縦横2倍に細かいのです。これによって小さい画面でも驚くほど綺麗な画質を実現しています。スマホの画面ってPCのディスプレイに比べてビックリするほど綺麗ですよね？

画像を画面上で300×300pxの大きさでPCで見た時と同じように綺麗に表示したい時は、用意する画像のサイズを600×600pxにしておいて縮小表示する必要があります。スマホに対応していないサイトのバナー広告などを、ダブルタップとかして見るとぼやけていて汚い場合が多いです。

まぁ、そもそもこの事が原因かどうか確信はないのですが…(笑)
この回答で補足したかったのは、試すのならもっとサイズの大きい画像を！という事です。

お礼

再度親身な回答頂きありがとうございました。読み違えをしておりました。

確かに用意していた画像のサイズは小さなものでした。

早速試してみますありがとうございました。

回答No.1

noname#217950

ライブドアブログは使った事あるのですが、かんたん背景画像を知りません。すみません。

ひょっとしてですが、CSSの問題ではなくスマホの高解像度ディスプレイだからぼやけてしまうだけって事はないですか？そうならば、あらかじめ必要な大きさの2倍3倍のサイズの画像を用意しておく事で解決ですが。。。

もしまだハマっている様なら一度試してみては？

と、自信なさげな回答ですみません。。。

異常に引き伸ばされて…という症状の部分が、もう少し具体的に書いてあるともう少し答えられるかもしれません。

お礼

迅速かつ親身なご回答をありがとうございます。素人では手に負えず困っていましたので大変助かります。

>CSSの問題ではなくスマホの高解像度ディスプレイだからぼやけてしまうだけ

まさにそうかもしれないです。まだ試してないですが後でちょっとやってみます。こういうのは一人では気付けないので回答を頂けて良かったです。

異常に引き伸ばされて、というのはそうですね・・・文字だけでは説明が難しいのですが、PC画面上ではブログの背景がきちんと劣化せず（普通に？）表示されるのが、スマホのPCビューでは画像を無理やり虫眼鏡で拡大したような表示なってしまうんですよね・・・。スマホのPCビューに対して、画像が高解像度すぎたということもあるでしょうか・・・。

いずれにしましても貴重なお時間を割いて回答を頂きましてありがとうございました。