백그라운드 이미지를 스크롤을 해도 위치가 변하지 않게 고정하는 방법

백그라운드  고정하는 방법

   body {
      height: 100vh;
      background-image: url('path/to/your/image.jpg');
      background-attachment: fixed;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
   }

 

• background-image: 배경 이미지의 URL을 지정한다.
• background-attachment: fixed: 배경 이미지를 고정하여 스크롤 시에도 고정하게 만든다.
• background-size: cover: 배경 이미지가 요소의 전체 크기를 덮도록 조정한다. 이 설정은 이미지가 요소의 크기에 맞게 조정되지만, 원본 비율을 유지한다.
• background-position: center: 배경 이미지를 요소의 중앙에 위치시킨다.
• background-repeat: no-repeat: 배경 이미지가 반복되지 않도록 설정한다.

 

background-attachment가 배경화면을 고정시키는 속성이며, 다른 속성들은 보조적인 수단이다.