CSS : 브라우저보기 영역보다 큰 고정 된 배경 이미지

Question

사이트의 모든 콘텐츠를 감싸는 #page div의 배경 이미지로 큰 사진 (940x1210)이 있습니다. 사진은 얼굴 사진이므로 바보처럼 보이는 것처럼 보입니다. 반복하지 않도록 설정하고 0,0에 배치했습니다.

#page로 묶인 내용이 1210px보다 크고 배경 이미지가 스크롤되도록 설정되어있는 경우 사진이 밖으로 스크롤되지만 고정되어 있으면 처음에는 브라우저보기 영역에 표시된 이미지 부분 만 표시됩니다 - 상단 절반 (고정 된 상단 왼쪽) 또는 하단 절반 (고정 하단 왼쪽).

다음은 질문입니다. 하단까지 도달 할 때까지 이미지의 전체 높이를 스크롤하는 동안 배경 이미지를 #page (또는 본문) 하단에 어떻게 고칠 수 있습니까?

Answer 1

사용자가 스크롤 할 때 배경 이미지의 동작을 변경하려면 onscroll Javascript 이벤트를 사용해야합니다.

맨 위에 첨부 된 배경 이미지로 시작하고 스크롤하도록 설정하십시오. 사용자가 스크롤 할 때 이미지의 높이 이상으로 스크롤했는지 테스트합니다. 그들이 가지고있는 즉시 배경 이미지를 고정 된 위치로 설정하십시오.

그런 다음 사용자가 이미지의 높이보다 작은 곳으로 다시 스크롤하는 경우 배경을 다시 스크롤하도록 설정하십시오.