<body>内でbackground-imageが効かないことに関して

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

プログラミング初心者です

cssにてbackground-imageを利用して背景画像を設定しようとしています。
ただ<body>に対しての指定であれば画像が現れるのですが、<div class="top-wapper">の
指定であると背景画像が現れません。

###ソースコード

【html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset ="utf-8">
  <link rel="stylesheet" type="text/css" href="../css/stylesheet.css">
  <title></title>
</head>

<body>
  <header>
  </header>
  <div class="top-wapper">
  </div>
</body>
</html>


【css】

body{
  background-image: url('../img/aaaa.jpg');
 /*表示される*/
  }

.top-wapper{
  background-image: url('../img/aaaa.jpg');
/*表示されない*/  
}

###補足情報(言語/FW/ツール等のバージョンなど)

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

回答1件

css
1.top-wapper{
2  background-image: url('../img/aaaa.jpg');
3  border: 1px solid #CCC;
4}

こうすれば、なぜ表示されないか分かると思います。

投稿2015/10/31 10:36

退会済みユーザー

総合スコア0

t10702th

2015/10/31 11:07

ご回答いただきありがとうございます。こちらはwidthやheightを指定しないといけないということでしょうか。確かに上記を指定すると画像が一部現れました！！ただ、サイトの横幅全てを使って画像を表示したいのですが、一部のみ大きくアップされてしまっており、うまくいきません・・。 background-size:100%; としてみましたが、これでもうまくいかないようです。。

退会済みユーザー

2015/10/31 11:35 編集

要するに…div に height, width を設定しないと（画像を表示するのに十分なエリアを確保しないと）、いけないのです。 > サイトの横幅全てを使って画像を表示したいのですが、 > 一部のみ大きくアップされてしまっており、うまくいきません・・。それは嘘だ。アップはされていないはず。単純に切り抜かれているだけ。