<div class="contents">
<h2>FIRST CONTENTS</h2>
</div>
<div class="bgScale">
<h1>SAMPLE TEXT</h1>
<p>Enter the sample text here.<br>
I hope you can make something really good.</p>
</div>
<div class="contents">
<h2>NEXT CONTENTS</h2>
</div>
<div class="contents">
<h2>NEXT NEXT CONTENTS</h2>
</div>
.bgScale h1 {
text-align:center;
padding:150px 0 0;
font-size:50px;
}
.bgScale p {
text-align:center;
padding:100px 0 0;
font-size:30px;
}
.bgScale {
background: url(https://www.nan-demo.work/wp-content/uploads/2022/07/image07.jpg) no-repeat 50% 50%;
background-size: 100%;
width: 100%;
height:600px;
}
.contents {
height:300px;
}
$(window).scroll(function() {
var scroll = $(window).scrollTop();
$('.bgScale').css({
backgroundSize: (100 + scroll/10) + "%",
});
});
This Pen doesn't use any external CSS resources.