background-size와 attachment : 페이지 스크롤 시 배경 이미지 고정

 

 

background-size

배경 이미지의 사이즈를 지정한다.

 

background-size에 대한 자세한 내용은 여기를 참고

 

 

 

 

background-attachment

배경 이미지의 위치가 고정되어 있는지의 여부를 지정한다.

 

scroll

: 내용을 스크롤하면 배경 이미지는 고정된 상태로 스크롤 된다.

 

fixed 

: 뷰포트(현재 문서가 전체 화면 모드로 표시되는 경우, 화면)를 기준으로 고정된다. 요소에 스크롤 메커니즘이 있어도 배경은 내용과 함께 움직이지 않는다.

 

local

: 요소의 내용을 기준으로 고정된다. 요소에 스크롤 메커니즘이있는 경우 배경은 내용과 함께 스크롤된다. 그리고 배경의 이미지 영역과 위치 지정 영역은 내용의 스크롤 가능 영역에 상대적이다. 즉, 아래 두가지 코드는 다르게 표현된다.

background-attachment: local, scroll;
background-attachment: scroll, local;

(여기를 클릭하여 데모확인)

 

 

 

 

 

다음은 background 속성을 이용해 만들어본 작업물로 스크롤 시 배경 이미지는 고정했다.

 

background-size: cover;

background-attachment: fixed;

 

 

비상업 목적의 작업물