[웹디자인] parallax

html

<div class="wrapper">
  <div class="text-group">
    <h2>TEST</h2>
    <h4>TEST</h4>   
  </div>
</div>
<div class="wrapper">
  <div class="text-group">
    <h2>TEST</h2>
    <h4>TEST</h4>   
  </div>
</div>

css

.wrapper {
  background: url('https://placeimg.com/300/300/any');
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}
.text-group {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  color: white;
}

background-attachment: fixed는 이미지가 뷰포트에 고정되어 스크롤 영향을 받지 않는다.
background-size: cover는 비율을 유지하면서 빈공간없이 가득 채운다.