<div class="sample_wrap">
    <div class="sample_white"><h2>clip-pathを使用した、背景固定のスマホ対応！</h2></div>
    <div class="sample_bg2"></div>
    <div class="sample_white"></div>
</div>
*{
  margin:0;
}
.sample_bg2{
  height: 25rem;
  }
.sample_bg2::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height:100%;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-image: url(https://apice.biz/wp-content/uploads/2023/05/sky_00199.jpg);
  background-size: cover;
}

.sample_white {
  width: 100%;
  padding: 5%;
  z-index: 1;
  position: relative;
  background: #fff;
}
.sample_white h2{
  font-size: 20px;
  color: #0D6FB8;
  border-left: 2px solid #0D6FB8;
  padding-left: 10px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.