ＣＳＳの背景画像挿入について

前提・実現したいこと

CSSで背景画像を表示させたいです。
ファイルの位置関係は
模写ファイル
↓
index.html
style.css
imgファイル→背景にしたい画像（haikei.jpg)

発生している問題・エラーメッセージ

うまく表示されない

該当のソースコード

HTML CSS

### 試したこと

絶対パスや相対パスの問題かなと思い調べてみましたが、どのサイトを見比べてもこの記述であっているのでは、と思ってしまいます。![```
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Airbnbでお家、アパート、お部屋をシェアしよう</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<header>
		<div class="header-left">
			<ul>
				<li>概要</li>
				<li>準備</li>
				<li>安全</li>
				<li>マネープラン</li>
		    </ul>
		</div>
		<div class="header-right">
			<ul>
				<li>予想月収</li>
				<li>￥139,519</li>
			</ul>
			<a href="#">はじめる</a>
		</div>
	</header><!-- /header -->
	<main>
		<div class="main-container">
			<div class="check">
				<h1>Airbnbホストになって、暮らしをレベルアップ</h1>
				<p>どれくらいの収入が見込めるかチェック</p>
			</div>
		</div>
	</main>
</body>
</html>

```CSS
コード

イメージ説明
body{
width:100%;
}
.header-left{
float:left;
}
header li{
float:left;
}
.header-right{
float:right;
}
header a{
background-color:red;
color:white;
padding:10px;
}
header{
background-color:white;
height:50px;
}
.main-container{
height:500px;
background-image:url('img/haikei.jpg');
}

退会済みユーザー

2020/01/17 09:24 編集

キャブチャのurlがちゃんと指定できていないです。 https://teratail-v2.storage.googleapis.com/uploads/contributed_images/54e7a6dea885584b3c4d46180ec4028a.png ファイルの位置関係を掲載している様ですが、そのパスを適切ですか？背景画像ではなく<img>タグでちゃんと表示できるか確認してみてください。 ->表示される　　　表示されるなら、パスはちゃんと指定できているので他に問題点があります。　->表示されていない　　　表示されていないなら、パスが適切ではありません。もう一度見直しましょう。　　　（適当なコードの場合）ーーー本件とは、関係ないのですがまだプログラミングを始めたばかりでエディタをなんとなく選んだ場合は、visual studio codeがおすすめです。パスが適切かもみれますし、画像のパスもコピーできるなど、ファイルの位置関係も把握が比較的理解しやすいかと思います。（私は）無料なので一度試してみてはどうでしょう？ https://azure.microsoft.com/ja-jp/products/visual-studio-code/

退会済みユーザー

2020/01/18 04:05

ありがとうございます。Chromeで実行したら無事表示できました。ずっとInternet Explorerでやっていました。表示に違いがあるとは知らなかったです。 visual studio code使ってみます！ありがとうございました！

行動規範の内容に同意します

回答1件

ベストアンサー

手元で同一環境を作ってChromeで確認しましたが画像は問題なく表示されました。
再現ができないので推測にはなります。

sample
  ⊢index.html
  ⊢style.css
  ⊢img
    ⊢haikei.jpg

原因追求ですが、index.htmlをブラウザで開き、開発者ツールを用いて確認すると原因を追求しやすいです。

1 Consoleにエラーが出ているか確認。出ている場合はそのエラーを修正する。
2 haikei.jpgにdisplay: noneなど非表示になるようなプロパティが設定されているか確認。

![
(150×150のグレー画像がhaikei.jpg)

投稿2020/01/17 08:47

vnsa7221

総合スコア348

退会済みユーザー

2020/01/18 04:07

ChromeとInternet Explorerで表示結果が変わることを知りませんでした。非常に丁寧なご回答、ありがとうございました。

退会済みユーザー

2020/01/18 04:38 編集

本当に解決したのでしょうか？ ChromeとIEどちらもうまく表示されない状況のままで良いとは思えません。ユーザがchromeしか使用していないなら別の話ですが。そもそもなのですが、うまく表示されていないのうまくという表現が曖昧です。表示がされていないのか、指定したcssがきいていないのか。。etc 文で説明ができないのであれば、スクリーンショットでも良いので明示してください。

退会済みユーザー

2020/01/19 04:23

IEではいまだに表示されていません。。うまくという表現は、画像自体が表示されないという意味です。

退会済みユーザー

2020/01/19 04:31

現在模写コーディングをしています。ディベロッパーツールは使わないという縛りがあるのであまり使いたくない状況です。ほかにも、IEでは思った通りに表示されるのにChromeでは表示にずれが生じる箇所もあります。表示の差異はどのように埋めればよいのでしょうか、、

退会済みユーザー

2020/01/19 04:37

スクリーンショットは画像サイズの問題で送ることができませんでした。

退会済みユーザー

2020/01/19 06:21 編集

解決済みになっているのに言われても。。とは思います。 ===== ちなみに、表示されなかったIEのバージョンを教えてください。参考： http://www.webmagazine.kakisiti.co.jp/?p=518 基本は、Chromeをベースに作成していくかと思います。 >表示の差異はどのように埋めればよいのでしょうか、、プロパティによっては、対応していないものもあります。（大体は対応していますが。）そのプロパティあるいはタグがどれくらい対応しているかを確認する事ができるサイトとして有名なのは[can i use]というページです。(下記URL参考) https://caniuse.com/

退会済みユーザー

2020/01/19 06:26

ちなみに、 background-image プロパティは、要素に1つ以上の背景画像を設定します。以下で試してみてください。 background: no-repeat url("img/haikei.jpg");

行動規範の内容に同意します