![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_16.png?e8efa67)
(以下、一部分だけ取り出した記述です。)
body{
background-color:#ffffff;
background-image:url(bg.jpg);
}
#page{
width:960px;
background-color:#ffffff;
}
========================================
【質問】
オフライン上ですが、以下のような症状が出ます。
考えられること、原因になりうる要素に思いあたることがあったら何でもいいので
教えてください。
【状態】
サイト内の他のページにリンクで切り替わるとき、あるいはTOPページに戻るとき、ブラウザの更新ボタンを押したとき、正確にはクリックしたマウスのボタンをはなした瞬間)など、ページを読み込むときに一瞬(まばたきのタイミング)ですが背景色の白(#ffffff)がチカッと表示され、その後画像が表示されるという状況です。
background-colorを白ではなく、緑に設定するとマウスを離した瞬間緑色が表示され、すぐに背景画像(ここではbg.jpg)が表示されます。
背景画像と同じ系列の色で背景色を指定してもやはり、一度background-colorが実施されたあとに背景画像が表示されている(ような感じ)のが目視できます。
【試してみたこと】
●background-colorとbackground-imageの記述順を変えてみた。
●background-colorの記述を取り、background-imageだけにしてみた。
●background-repeatを記述したり、消してみたりした。
●背景画像をjpgではなくgifのもので試してみた。
●背景画像のサイズを(たとえば)200X140とか1200×800などと変えてみた。
【マシン、作成環境】
Windows7(64ビット)、メモリ8Gのノートマシン。
ホームページ作成ソフトはいっさい使用していない(メモ帳のみで手打ち)。
No.2ベストアンサー
- 回答日時:
画像が大きい場合には必ずそうなります。
ブラウザは逐次表示が必須とされています。転送や処理が間に合わないときも可能なものから順次表示すべきであることは、理解できると思います。
画像を単色でシンプルなGIFなどにすると、その症状は実感できないと思います。逆に極めて大きな画像を背景にすると描画に時間がかかります。
プログレッシブJPEGにするとかも良いでしょう。(画像によると逆効果の場合も)
いずれにしても背景画像はユーザーにとっては邪魔以外の何者でもないので可能な限りデータ量は小さくしましょう。背景画像を見に来る人はいない。
ありがとうございます。画像の大きさなどに原因があるんですね。今のマシンは性能がいいのでkbあたりの画像はすいすい表示できるものと思い込んでいました。このような症状になったら画像を変更するか背景色で検討します。
「背景画像を見に来る人はいない」というお言葉にはあたりまえのことながら改めて気づかされました。本当にそうです。そうなんですよね。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_16.png?e8efa67)
No.1
- 回答日時:
body{
background-color:#ffffff; ←削除
background-image:url(bg.jpg);
}
#page{
width:960px;
background-color:#ffffff; ←削除
}
========================================
で、どうですか?
さっそくの回答をありがとうございます。
「背景に画像を使うときは、もし画像が表示されなかったときのことも考慮し、サイト全体のイメージを損ねない背景色をあわせて記述しておく」ということで(指導を受けたので)並記しました。
でも、削除して改善できれば取っちゃおうかと思ったのですが、取っても変化なしでした。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS 疑似要素で背景画像に指定したSVG画像の色変更 2 2023/01/30 22:45
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS スマホ表示用のwebページ、style.cssでは表の中の文字 font-size は指定できない? 1 2023/03/27 18:57
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlかcssで背景の白い枠をなく...
-
CSSでの動画のマスク処理
-
画像の上にテキスト配置で、拡...
-
lightbox2で画像を天地左右中央...
-
ページごとに背景画像を変更し...
-
background-sizeの背景で最小値...
-
背景固定画像にイメージマップ
-
ポップメニューの作り方教えて...
-
要素の幅をいろんな写真の幅に...
-
【ウェブ構築】DIVの背景を斜め...
-
画像貼り付け、URLに飛べる軽い...
-
PDFの保存ボタンが表示されません
-
ヤフーオークションの説明文に...
-
ロゴマークだけを抜き取って貼...
-
PowerDirectorでバックで曲が流...
-
画像の加工:方眼紙のような画...
-
背景が透明なリンクボタンで、...
-
アイコンの背景を透過させたい
-
フォトショップで台形の斜め線...
-
FireAlpacaの透過、PNG保存の状...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像の上にテキスト配置で、拡...
-
background-repeat CSS で切れ...
-
【至急お助け!】チェックボッ...
-
画像とその下にあるテキストの...
-
iframe内をクリックさせない方...
-
【Webサイト】画像が小さく表示...
-
同じ画像 複数回使用
-
htmlかcssで背景の白い枠をなく...
-
IMGタグで画像の繰り返し使用は…
-
background-sizeの背景で最小値...
-
background-sizeでcontainする...
-
lightbox2で画像を天地左右中央...
-
コーディング中、右側に謎の余...
-
画像上に文字を表示するとiPhon...
-
LightBoxの矢印の出し方
-
背景画像をリピートさせない方...
-
CSSで背景画像をランダムに表示...
-
フッターの背景に色を指定した...
-
ページの上下に白い横線が入る
おすすめ情報