【CSS】パララックス

<div class="para_box">
  <div class="para_content img_bg_01">PARALLAXAREA</div>
  <div class="f_content">CONTENTAREA</div>
  <div class="para_content img_bg_02">PARALLAXAREA</div>
　<div class="f_content">CONTENTAREA</div>
  <div class="para_content img_bg_03">PARALLAXAREA</div>
  <div class="f_content">CONTENTAREA</div>
</div>

 

.para_content{
  min-height: 400px;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.f_content{
  padding: 60px;
  background-color: #fff;
}

.para_content.img_bg_01{
  background-image: url();
}

.para_content.img_bg_02{
  background-image: url();
}

.para_content.img_bg_03{
  background-image: url();
}

 

※スマホで調整が必要な時

@media screen and (max-width: 768px){
  .para_content{
    height: 100%;
    background-image: none;
  }

  .para::before{
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transform: translate3d(0, 0, -1px);
    transform: translate3d(0, 0, -1px);
    width: 100%;
    min-hieght: 100%;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
  }

  .para_content.img_bg_01::before{
    background-image: url();
  }

  .para_content.img_bg_02::before{
    background-image: url();
  }

  .para_content.img_bg_03::before{
    background-image: url();
  }
}