背景画像とブラウザの間に隙間ができている

背景画像とブラウザの間に隙間ができてしまいます。
htmlに

{% load static%}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{% static 'accounts/top.css' %}">
    <title>XOXO</title>
</head>
<body>
    <div class="heading">
        <h1>LOVE YOU</h1>
    </div>
</body>
</html>

と書き、cssに

body{
    width: 100%;
    height: 100%;
    color: black;
    background-size:contain;
    background-repeat:no-repeat;
    background-image: url('top.jpg');
 }

*{
    margin: 0;
    padding: 0;
}

と書きました。background-sizeをcontainやautoなど試したのですが、どれも背景画像とブラウザの間に隙間ができてしまいます。画像の縦横の大きさが悪いから、もうcssでは背景画像とブラウザの大きさを合わせることはできないのでしょうか？それともまだcssで私が知らないプロパティを試せば背景画像とブラウザの大きさを合わせることができるのでしょうか？

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

回答2件

ベストアンサー

css
1body {
2  width: 100%;
3  height: 100%;
4  color: black;
5   background-image: url('top.jpg');
6  background-repeat: no-repeat;
7  background-size: cover;/* contain → cover　*/
8  background-position: center center;/* 追加　*/
9}
10* {
11  margin: 0;
12  padding: 0;
13}