CSS / Reference / background-attachment

background-attachment는 배경이 뷰포트, 요소의 박스, 요소 내부의 스크롤 내용 중 어디에 붙어 있는지를 정합니다. scroll과 local은 페이지 스크롤만 볼 때 비슷해 보여도 내부 스크롤에서 다르게 동작합니다.

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

.panel { overflow: auto; background-attachment: local; }
.hero { background-attachment: fixed; }

값과 적용 조건은 MDN background-attachment에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 background-attachment-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>background-attachment 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 240px; height: 150px; border: 12px dashed #718096; padding: 20px; background-color: #eaf2f8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Crect width='160' height='80' fill='%23006c9c'/%3E%3Ccircle cx='40' cy='40' r='24' fill='%23ffd166'/%3E%3C/svg%3E"); background-repeat: no-repeat; }
.target, .reference { height: 150px; overflow: auto; background-repeat: repeat-y; background-size: 160px 80px; }
.target { background-attachment: local; }
.reference { background-attachment: scroll; }
.spacer { height: 400px; }

/* 좁은 화면에서 실습 외곽을 맞춥니다. */
.target, .reference { max-width: calc(100vw - 48px - 64px); }
</style>
</head>
<body>
<main id="demo">
<h1>background-attachment 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">local: 내부를 스크롤</p><div class="target"><div class="spacer">박스 안을 스크롤해 배경 이동을 확인하세요.</div></div></div><div class="b"><p class="label">scroll: 내부를 스크롤</p><div class="reference"><div class="spacer">박스 안을 스크롤해 배경 이동을 확인하세요.</div></div></div></section>
</main>
</body>
</html>

두 박스 안에서 각각 스크롤해 보세요. local의 배경은 내용에 붙어서 이동하고 scroll의 배경은 요소 박스에 남습니다. 정지 화면보다 직접 스크롤하는 비교가 중요합니다.

페이지 스크롤과 내부 스크롤

scroll 배경도 페이지를 스크롤하면 요소와 함께 이동합니다. 여기서 고정된다는 표현은 내부 내용에 대한 것이며 화면 전체에 고정된다는 뜻이 아닙니다. fixed는 뷰포트를 기준으로 하지만 transform 같은 상위 요소 설정과 브라우저 처리 차이가 결과에 영향을 줄 수 있습니다.

모바일과 성능 확인

fixed 배경은 모바일에서 데스크톱과 다른 동작이나 성능 문제가 나타날 수 있습니다. 대상 브라우저에서 실제 스크롤을 확인하고 필요하면 scroll로 되돌리는 대안을 준비하세요. 배경 위치와 크기 계산도 attachment에 따라 달라질 수 있으므로 다른 배경 속성과 함께 확인합니다.

페이지 스크롤에서 fixed와 scroll 비교

다음 전체 문서를 css-reference-10576-practice.html로 UTF-8 저장한 뒤 브라우저에서 엽니다. 다른 예제 파일에 중첩해서 붙이지 않고 별도 파일로 시험합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>페이지 스크롤에서 fixed와 scroll 비교</title>
  <style>
    body { margin: 16px; color: #20242b; font: 16px/1.7 sans-serif; }
    main { max-width: 52rem; margin: auto; }
    h1 { font-size: 1.35rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .samples > * { max-width: 100%; min-width: 0; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
body { min-height:1500px; } .panel { height:180px; margin-block:24px; background-image:linear-gradient(#006c9c 0 80px,#ffd166 80px 160px,#e6f2ff 160px); background-size:100% 240px; background-repeat:repeat-y; } .fixed { background-attachment:fixed; }
  </style>
</head>
<body>
<main>
  <h1>페이지 스크롤에서 fixed와 scroll 비교</h1>
<p>scroll</p><div class="panel"></div><p>fixed</p><div class="panel fixed"></div><p>페이지 자체를 위아래로 스크롤하세요.</p>
</main>
</body>
</html>

scroll 배경은 요소와 함께 이동하고 fixed 배경은 뷰포트에 고정된 기준으로 그려집니다. 내부 박스 스크롤을 비교한 앞 실습과 다릅니다. .fixed만 scroll로 바꾸어 차이를 확인한 뒤 복구합니다. 모바일의 fixed 처리는 대상 브라우저에서 별도로 확인하세요.

여러 배경 속성을 한 화면에서 조합하려면 배경색과 배경 이미지 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 overflow입니다.

적용되지 않거나 예상과 다를 때

• 내부 비교는 overflow와 고정 높이가 있어야 스크롤이 생깁니다.
• 스크롤 효과가 끊기면 복잡한 큰 배경을 줄이고 fixed를 해제한 상태와 비교합니다.