背景画像がどうしても表示されない → 「clear:both;」を挿入してみる

CSS ＞ CSSトラブル対応

　状態:- 　閲覧数:14,490 　投稿日:2013-01-21 　更新日:2017-10-29
・解決するまで、5時間近くかかった
・めっちゃしんどいわ！

・こういうやつ
・外側のdivに当てたクラスで背景画像を指定してるのに、何故か表示されない
<div class="背景画像指定クラス">  

<h2 class="フロート左クラス"></h2><ul class="ロート左クラス"></ul>

</div>


・結局、「clear:both;」挿入したら、無事表示されるようになった
<div class="背景画像指定クラス">  

<h2 class="フロート左クラス"></h2><ul class="ロート左クラス"></ul>

<div style="clear:both;"></div>

</div>


問題
・「clear:both;」挿入しなくても、無事表示されているサイトもある
・「clear:both;」挿入しないと、表示されないサイトもある
・両者の違いが不明
・考えられるのは、レスポンシブにしていることが何か悪影響を及ぼしているのではないか、と言うもの
・レスポンシブ系は、widthとかを固定指定出来ないので、細かい挙動制御が難しいわ、と改めて思ったよ

結論
・いずれにしても、画像パスや、CSS指定方法があっているのに、背景画像がどうしても表示されないときは、
1.中でフロートを使用していないか確認
2.使用していたら、「clear:both;」を挿入してみる

CSSがどうしても効かない → 該当CSSの読込可否 → 該当CSSの反映可否


×

ゲストコメント一覧

番号 内容 投稿日
1 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 2013-09-03
2 thanks!!! 2015-01-20
コメント件数 … 2件

類似度ページランキング
順位 ページタイトル抜粋 ％
1 背景画像がどうしても表示されない → 「clear:both;」を挿入してみる 92
2 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 47
3 ページで使用されている「id名」「class名」をChromeで取得したい 　 44
4 Firefoxで画像が表示されない 43
5 「position:sticky;」がどうしても効かない →
を一旦削除してみる →
に「display:inline;」を指定
 42
6 URLが折り返し表示されない／Google Chrome 42
7 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく 41
8 rssページが正しく表示されない／Google Chrome 41
9 Chrome プロファイルが壊れている、と毎回表示されるが、英語なのでどうしたら良いか分からない 39
10 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある 39
11 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する 38
12 Braveインストールしてみたけれども、全ての広告を必ず非表示に出来るわけではないみたい 36
13 「Data URI scheme」画像拡張子は、正しいとは限らない 36
14 bootstrap3で意図せず横スクロールバーが表示される場合は、containerクラスの入れ子を疑う 35
15 作成した素材がどうしても見つからないときは、「png形式」を疑ってみる 35
16 画像を保存させないようにするjQueryプラグイン「jquery.dwImageProtector.js」 35
17 Illustrator CS2 でファイル名に「更新済み」を追加しない 35
18 「Twitter Bootstrap」導入したらおかしくなった時、試した方がよいかもしれないこと 34
19 「Google Chrome」のリリースノート（更新履歴）は公開されている 34
20 resizeが効かない場合は、min-heightを設定してみる 34
2026/9/07 8:13 更新
週間人気ページランキング ／ 8-31 → 9-6
順位 ページタイトル抜粋 アクセス数
1 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 3
1 Design 0 3
1 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 3
2 RGB ⇔ Lab | 色変換(色) 2
2 Chromeがおかしくなった。width認識が狭くなりレイアウトが崩れる | Google Chrome(ブラウザ) 2
2 このエントリーの結論 ／ 主な機能と使い方 ／ 補足 2
2 考え方A.長さの比率で角度６０°を分割 ／ R≧G≧B 2
3 「Google Chrome」履歴一覧から、複数履歴を選択して一度に開くことはできません。バージョン: 94.0.4606.81（Official Build） （64 ビット） | Google Chrome(ブラウザ) 1
3 resizeが効かない場合は、min-heightを設定してみる | CSS 1
3 HTML5では、inputタグの閉じタグを付与しない | CSS 1
3 textareaを手動リサイズできない時は、ブラウザを落としてみる | Google Chrome(ブラウザ) 1
3 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 1
3 擬似クラス（Pseudo-classes） | 擬似(CSS) 1
3 サムネイル画像にpadding指定してはいけない。特に文字列を埋め込んだ画像では | 画像 1
3 カラーコード ／ 色コード | カラーコード(色) 1
3 Flickrがサポートするライセンス 9 ＋ 特別なライセンス 2 | 画像著作権(画像) 1
3 拡張機能が Chrome によって無効にされました ／ この拡張機能は破損している可能性があります。 | Chrome 拡張機能 1
3 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 1
3 ブラウザ間差異とか、もううんざりなんだけど… 1
3 コンソールエラー ／ ブラウザ間差異 | ブラウザ 1
2026/9/7 5:05 更新