要素外エリア？を消したい

自分のHPのようなものを勉強の一環で作り始めてみました。それをローカルで開いた時は違和感ないのですが、検証機能を開いたとき、分かりづらいかもしれませんが、下記の画像のように背景画像（イメージ画像では背景画像部分を青色で代用）が画面いっぱいに表示されないのです。

そして、白い部分は、検証機能を開いた状態でマウスを当てても反応しないので、要素外なのですかね・・・という状態です。
bodyに背景画像を指定しているので、bodyにheight ○○pxやpadding 0 ,margin 0 など、試したのですが何も起こらず…。
どうしたら改善できますでしょうか？

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1">
6<link rel="stylesheet" href="style.css">
7<title></title>
8</head>
9
10<body style="background-image: url(image.jpg);background-repeat: no-repeat;background-size: cover;">
11<header>
12<div class="contents"><!-- 全体 -->
13    <h1></h1>
14    
15    <div class="top">
16        <img class="top-image" src="">
17    </div>
18    </div><!--contents --> 
19    </header>
20    <nav>
21    <div class="nav">
22    <ul class="menu">
23        <li class=""><a href="" target_blank></a></li>
24        <li class=""><a href="" target_blank></a></li>
25        <li class=""><a href="" target_blank></a></li>
26        <li class=""><a href="" target_blank></a></li>
27    </ul>    
28    </div>
29    </nav>
30        
31    
32    
33    
34   
35<div class="contents">
36<main>
37    <h2></h2>
38    <p><br>
39    </p>
40    
41    
42</main>
43    
44    
45    
46</div><!-- contents -->
47    
48   
49    
50    
51
52<footer>
53    <div class="contents">
54    <a href="#">ページ上部へ</a>
55    </div>
56</footer>
57    
58
59</body>
60</html>

CSS
1@charset 'utf-8'
2    
3    
4body {
5    padding: : 0 ;
6    margin: 0;
7	font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif;
8	font-size:80%;
9}
10
11
12.contents{
13    padding: 0;
14    margin: 0;
15   
16}
17 
18/* -----  header ----- */
19
20h1{
21    color:white;
22}
23
24.top{
25    
26   text-align: center;
27}    
28    
29.top-image{
30    
31   
32}
33
34/* ----- */
35
36/* ----- nav ------ */
37.menu{
38    padding : 10px;
39    text-align: center;
40    list-style: none;
41}
42ul li a{
43    color: white;
44}
45
46nav{
47    color: white;
48}
49
50/* ------ */
51
52/* ----- main ----- */
53main{
54    color:white;
55}
56
57/* ----- */
58
59/* ----- footer ----- */
60footer a{
61    color: #fff;
62}
63/* ----- */

m.ts10806

2020/04/20 12:24

現象再現するコードをご提示ください。

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

回答1件

ベストアンサー

こちらでいかがでしょうか?

CSS
1background-image: url(xxx.jpg);
2background-size: cover; /* こちらを追加してみてください。 */

以下のような記述を追加する必要があるかもしれないです。

CSS
1html,
2body {
3  min-height: 100vh;
4}

投稿2020/04/20 12:30

編集2020/04/21 06:42

new1ro

総合スコア4528

sirokuro

2020/04/20 12:36

ご回答ありがとうございます。 background-size: coverもやってみたのですが、変化せずでした。。。

new1ro

2020/04/20 22:07

なるほど.. ここから先は、 m.ts10806さんもおっしゃっているようにソースコードを見ないとわからないので、質問を編集して HTMLとCSSのソースコードを追加してほしいです。

sirokuro

2020/04/21 02:45

HTML CSS追記しました。お手数ですがよろしくお願いいたします。

new1ro

2020/04/21 03:55

CodePenで試してみました。右端まで画像が表示されています。 https://codepen.io/new1ro/pen/KKdgbGZ 画像は、ネット上のものを適当に使いました。 ---------------------------------------------------------------------- そのほか、可能性がある点としてはビューポートの設定です。例えば以下のようにしてみてほしいです。 <meta name="viewport" content="width=device-width,initial-scale=1"> 参考: https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607

sirokuro

2020/04/21 05:23

ふむふむ。参考サイトご紹介いただきありがとうございます。そして、ごめんなさい。私の上げた参考画像がちょっとわかりづらかったですね。。。んと、左右両端までは画像うまるのですが、下端が検証機能開いたとき切れて真っ白な表示がでるのです。検証機能開かなければ一見問題ないように埋まるんです。。一部切り取ってキャプチャ上げなおしました。制作し始めだったためちょっと恥ずかしさで、ためらってしまって…。ためらうべきではなかったですね。ごめんなさい。

new1ro

2020/04/21 06:41

htmlとbodyにmin-height: 100vh;を追加すればOKではないかと思います。 (回答にも追加しておきます。)

sirokuro

2020/04/21 07:16

おかげさまで、下端切れ改善しました！助かりました。ありがとうございました！！

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