선택자 요소에 배경으로 설정된 이미지를 스크롤 또는 고정 여부를 설정한다.
'scroll
'로 설정된 경우에는 콘텐츠와 함께 배경 이미지도 함께 스크롤 된다. 'fixed
'로 설정된 경우에는 배경 이미지는 그대로 고정되고 콘텐츠만 스크롤 된다. 이와 같은 설정은 보통은 <body>
에게 적용되는 경우이며 일반 요소에게 적용하는 경우는 다르다.
일반 요소에게 콘텐츠가 스크롤되도록 설정이 되어 있다면 적용된 배경 이미지는 기본적으로 고정된다. 하위 콘텐츠와 함께 적용된 배경 이미지가 스크롤 되기를 원한다면 local
값을 설정해야 한다.
만약에 하위 요소들에게 배경 이미지가 설정되어 있고 각각 fixed
로 고정되어 있다면 해당 하위 요소의 배경 이미지는 스크롤 되는 상위 컨테이너에게 고정되어 있으므로 스크롤시 독특한 효과가 나타나기도 한다.
background-attachment
속성에 사용하는 값을 나타낸다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.
<attachment>#
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
배경 이미지가 지정된 경우 뷰포트로 부터 고정(fixed
), 스크롤(scroll
) 또는 콘텐츠와 함께 스크롤(local
)할지를 나타내는 타입이다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.
scroll | fixed | local
뷰포트에 고정을 시킨다.
요소에게 적용된 배경 이미지가 요소의 콘텐츠와 함께 스크롤 된다.
기본 값이며 요소와 함께 배경을 스크롤한다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
기본 값이며 요소와 함께 배경을 스크롤한다.
뷰포트에 고정을 시킨다.
요소에게 적용된 배경 이미지가 요소의 콘텐츠와 함께 스크롤 된다.
body가 아닌 요소에게 배경 이미지를 적용시 스크롤 영역이 생기더라도 고정된다. 그러나 local
을 지정하면 콘텐츠와 함께 스크롤된다.
background-attachment: fixed;
object.style.backgroundAttachment="fixed";
자바스크립트 형식
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Backgrounds and Borders Module Level 3 | Last review date: 2022-7-9 |