JavaScript로 배경 이미지 고정하기
JavaScript에서 배경 이미지를 고정하려면 backgroundAttachment 속성을 사용하면 됩니다. 이 속성을 fixed 값으로 설정하면 페이지를 스크롤해도 배경 이미지가 화면에 그대로 유지되어 움직이지 않습니다.
backgroundAttachment 속성이란?
backgroundAttachment는 CSS의 background-attachment 속성을 JavaScript DOM을 통해 제어하는 기능입니다. 주요 값은 다음과 같습니다.
- scroll (기본값): 배경 이미지가 요소와 함께 스크롤됩니다.
- fixed: 배경 이미지가 뷰포트에 고정되어 콘텐츠를 스크롤해도 화면상 위치가 변하지 않습니다.
- local: 배경 이미지가 요소의 콘텐츠와 함께 스크롤됩니다.
예제 코드
아래 코드를 실행하여 JavaScript에서 backgroundAttachment 속성을 사용하는 방법을 직접 확인해 보세요. 버튼을 클릭하면 배경 이미지가 설정되고 고정됩니다.
<!DOCTYPE html>
<html>
<body>
<button onclick="display()">Click to Set background</button>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<p>Demo Text</p>
<script>
function display() {
document.body.style.background = "url('https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg') no-repeat right top";
document.body.style.backgroundAttachment = "fixed";
}
</script>
</body>
</html>코드 설명
위 예제의 핵심 동작 방식은 다음과 같습니다.
- 배경 설정:
document.body.style.background를 통해 배경 이미지 URL과 함께no-repeat right top(반복 없음, 오른쪽 상단 정렬) 옵션을 지정합니다. - 고정 처리:
document.body.style.backgroundAttachment = "fixed";코드가 배경 이미지를 뷰포트에 고정합니다. - 결과 확인: 버튼 클릭 후 페이지를 스크롤하면 텍스트는 위아래로 이동하지만 배경 이미지는 제자리에 그대로 머무는 것을 확인할 수 있습니다.
참고 사항
모바일 환경에서는 성능 문제로 인해 일부 브라우저에서 background-attachment: fixed가 제대로 작동하지 않거나 무시될 수 있습니다. 모바일 대응이 필요하다면 미디어 쿼리로 조건 분기하거나, position: fixed를 활용한 별도의 배경 레이어를 구현하는 방법을 고려하는 것이 좋습니다.