background-imageを用いた背景画像を途中で止め、白い背景の部分に要素を入れたい

模写コーディングをしている最中です。
画像のように、CSSにbackground-imageを用いて背景画像を設定しているのですが、画像を途中で切り、途中から白い背景（つまり何も背景に設定されていない状態）にして要素を追加していきたいです。
現状は、背景画像の終わりに表示させようとしたら背景画像がその要素に合わせようと補正がかかって伸びてしまったり、そもそも画像の外に表示されない状態で困っています。
最終的にレスポンシブ対応をさせたいと思っているのですが、この場合背景に画像を用いようと思ったらどの構文を使うのが一般的なのでしょうか？
background-imageだと、そもそも要素がないと画像が表示されないということに気づいてしまい、困っています。

<html>
<head>
	<title>あああああ```.site-header{
	position: fixed;
	z-index: 500;
	top: 0px;
	left: 0px;
	height: 80px;
	width: 100%;
	background: white;
	

}

.button{
	height: 40px;
	width: 40px;
	position: absolute;
	top: 20px;
	left: 20px;
	background-color: #CC3333;
	border-radius: 10px;



}

.button2{
	height: 50px;
	width:95%;
	background-color:#CC3333;
	color: white;
	border-radius: 10px;

}

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


}

.box{
	position: absolute;
	z-index: 1;
	top: 180px;
	right: 120px;
	width: 450px;
	height: 500px;
	padding: 50px 40px 	40px 40px;
	background-color: white;
	border-radius: 10px;



}

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;





}

.midasi{
	color: black !important;
	font-family: 'ヒラギノ角ゴ StdN';
	font-size: 30px;




}

.daimei>p{
	color: gray;
	font-family: 
	font-size:;
}

input{
	height: 40px;
	width: 350px;
}

.cp_ipselect {
	display: inline-flex;
	overflow: hidden;
	width: 60%;
	margin:10px 0px 0px 0px;
	text-align: center;
}

.cp_ipselect select {
	width: 100%;
	padding-right: 1em;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.cp_ipselect select::-ms-expand {
    display: none;
}
.cp_ipselect.cp_sl01 {
	position: relative;
	border: 1px solid #bbbbbb;
	border-radius: 2px;
	background: #ffffff;
}
.cp_ipselect.cp_sl01::before {
	position: absolute;
	top: 0.8em;
	right: 0.9em;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #666666;
	pointer-events: none;
}
.cp_ipselect.cp_sl01 select {
	padding: 8px 38px 8px 8px;
	color: #666666;
}

.aiueo{
	width: 34%;
}


.okane{
	display: inline-block;
	font-size: 30px;
	font-family: 'Impact';
	color: black;
	margin: 30px 5px 0px 0px;

}

.kajou{
	position: relative;
}

![この白い部分から要素を追加していきたいのに、画像内に表示されてしまっている](06774ebf824b409f8d41e67ebae9accb.png)
コード
```</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">
	<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>
		<div class="box">
			<content class="daimei">
				<p class="midasi">
					あなたのスキルに応じて、最適な転職を<br>
				</p>

				<p>
					どれくらいの年収が見込めるのかチェック
				</p>

				<input type="text" name="年収"   >

				<div class="cp_ipselect cp_sl01">
				<select required>
					<option value="" hidden>Choose</option>
					<option value="1">cat</option>
					<option value="2">dog</option>
					<option value="3">rabbit</option>
					<option value="4">squirrel</option>
				</select>
				</div>

				<div class="cp_ipselect cp_sl01 aiueo">
				<select required>
					<option value="" hidden>Choose</option>
					<option value="1">cat</option>
					<option value="2">dog</option>
					<option value="3">rabbit</option>
					<option value="4">squirrel</option>
				</select>
				</div>
				
				<p>
					<span class="okane">123,456,789円</span>
					<span class="tuki">月あたり</span>
				</p>

				<button type="button" value="akaka" class="button2">
					今すぐ年収をチェック
				</button>
			</content>
		</div>

		<div class="kajou">
			aaaaa
		</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>
コード

hatena19

2020/03/09 02:17 編集

マークダウン書式の使い方が間違っているので表示がおかしくなっています。マークダウン書式の使い方を理解して修正してください。下記のように記述してください。プレビューが表示されるのでそれを確認しながら修正してください。 ```htm ここにHTMLコードを記述 ``` ```css ここにCSSコードを記述 ``` あるいは、コード部分を選択して、ツールバーの<code>ボタンをクリックしてもOKです。

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

回答1件

質問文内の画像のマークダウンをコピーして↓に貼り付けました。

この背景画像内の下部に表示されている「aaaaa」を背景画像の下の空白部分に表示したいということですね。

現状は下記のようにhaikeiクラスのボックス内に、kajouクラスのボックス（中身はaaaaa）が入っているために背景画像内に表示されます。

html
1<div class="haikei">
2
3    中略
4
5    <div class="kajou"> aaaaa </div>
6</div>

下記のようにkajouクラスのボックスをhaikeiクラスのボックスの外に出せば空白部分に表示されます。

html
1<div class="haikei">
2
3    中略
4
5</div>
6<div class="kajou"> aaaaa </div>

修正依頼にコメントしましたが、質問文はマークダウン書式を正しく使って修正しておいてください。
なんとか解読して一応回答しましたが、今後はプレビューを確認しながら質問文が正しく書けているか確認してください。

投稿2020/03/09 02:28

編集2020/03/09 02:28

hatena19

総合スコア33715

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

background-imageを用いた背景画像を途中で止め、白い背景の部分に要素を入れたい

関連した質問