スマホでサイトをみると、backgroundーimageがうまく表示されません。検証ページのスマホ表示でみる画面とは異なっています。

Question

解決したいこと　検証画面のような背景画像の表示にしたいです

スマホ表示では、以下の画像のような背景画像になってしまいます。
![
検証画面では、以下のようになっています

ちなみに次の画像は、pc表示です

	<section class="top">
		<div class="ttl" id="ttl">
			<h1>Reo Watanabe</h1>
			<h2>Welcome to My Portfolio</h2>
		</div>
		<div class="scroll-btn" id="scroll-btn">
			<span></span>
			Scroll
		</div>
	</section>

.top{
		height:100vh;
		background-image: url("image/S__15196194.jpg");
		background-size: cover;
		background-position: center center;
		overflow: hidden;
		border-bottom: solid 1px rgba(112,121,112,0.5);
		font-family: "Times";
		display: flex;
		position: relative;
		justify-content: center;
		.ttl{
			text-align: center;
			color:#E4E4E4;
			opacity: 0.8;
			font-weight: 100;
			align-self:center;
			width:60%;
			h1{
				font-size: 80px;
				font-weight: 200;
			}
		}

scssはコンパイル済みです。

検証画面の表示と実際の表示が異なっていて困っています。よろしくお願いします

Answer 1

ううん、これはbackground-attachment:fixed;の時に起きる問題のはずで
background-attachmentが初期値のままなら起きないはずなんですが・・・

jsとかでbackground-attachment:fixedでパララックスしようとしてないですかね？

Answer 2

background-size: auto 100vh;
とかでどうですか？　キャッシュの問題ってことないですか？