白い部分に背景画像を配置したい

この添付画像の白い部分に画像を配置して背景画像とし、その上にボックスを配置したいのですが、background-imageとcolorの構文を使っても全く反応しません。
これは何が原因なのでしょうか？

以下、コード本文のコピペ
HTML

<!DOCTYPE html> <html> <head> <title>案件テスト</title> <link rel="stylesheet" type="text/css" href="チェックテスト.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body>

<div class="site-header">
	<p class="ryoukin">
		予想月収　？　<span class="yen">¥3億</span>
	</p>
	<button type="button" value="はじめる" class="button">
		はじめる
	</button>
	<img class="button" src="https://images-na.ssl-images-amazon.com/images/I/31SqyQ7PphL.jpg">
</div>

<div class="haikei">
	
	<div class="">

	</div>

</div>

<br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body> </html>

CSS
.site-header{
position: fixed;
top: 0px;
left: 0px;
height: 80px;
width: 100%;
background: green;

}

.button{
height: 40px;
width: 40px;
position: absolute;
top: 20px;
left: 20px;
background-color: red;

}

.haikei{
background-image: url(https://eikaiwa.dmm.com/blog/wp-content/uploads/2016/05/20160317182055.jpg);

}

p.ryoukin{
text-align: right;
position: absolute;
top: 17px;
right: 170px;
color: #C0C0C0;
font-size: 15px;

}
.yen{
font-size: 30px;

}

button.button{
margin: 0 0 0 auto;
top:25px;
right: 50px;
height: 30px;
width: 100px;
color: white;

}

s8_chu

2020/03/06 11:34

現状のスクリーンショットのみでは問題箇所がわからないため、質問者さんの問題が再現するコードを質問文へ追記していただけませんか？

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

回答1件

css
1.haikei{
2  background-image: url(https://eikaiwa.dmm.com/blog/wp-content/uploads/2016/05/20160317182055.jpg);
3  height: 700px;
4  margin-top: 80px;
5}