<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)  + "%",
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js