속성 background-attachment

속성 background-attachment는 요소의 배경 이미지를 어떻게 스크롤할지 설정합니다: 텍스트와 함께 스크롤되거나 텍스트가 이미지 위를 스크롤되도록 합니다.

구문

css선택자 {
  background-attachment: fixed | scroll | local;
}

값

기본값: scroll.

예시 . scroll 값

현재 속성 background-attachment가 scroll 값으로 설정되어 있습니다. 요소를 수직으로 스크롤해 보세요 - 텍스트가 배경과 함께 스크롤되는 것을 볼 수 있습니다:

html<body>
  <div id="elem">
    some long text
  </div>
</body>

cssbody {
  background-attachment: scroll;
  background-image: url("bg.png");
}

#elem {
  width: 400px;
  margin: 0 auto;
  text-align: justify;
  font-weight: bold;
  font-size: 20px;
}

Результат:

예시 . fixed 값

이제 속성 background-attachment가 fixed 값으로 설정되어 있습니다. 요소를 수직으로 스크롤해 보세요 - 텍스트가 배경 위를 스크롤하는 것을 볼 수 있습니다:

html<body>
  <div id="elem">
    some long text
  </div>
</body>

cssbody {
  background-attachment: fixed;
  background-image: url("bg.png");
}

#elem {
  width: 400px;
  margin: 0 auto;
  text-align: justify;
  font-weight: bold;
  font-size: 20px;
}

Результат:

함께 보기