CSS background-attachment 속성 – 배경 이미지의 부착 기준 지정

`background-attachment` 속성의 이해

background-attachment 속성은
요소에 적용한 배경 이미지가 어느 기준에 부착(attachment)될지를 지정합니다.

뷰포트(viewport)에 대해 고정되어(fixed) 부착하는지,
요소의 배경 영역 자체에 부착되어 함께 스크롤(scroll)될지,
또는 요소의 콘텐츠(local)와 함께 부착되어 스크롤될지를 선택할 수 있습니다.

CSS 데모: background-attachment 데모 버튼을 클릭해 보세요!

background-attachment 속성은 요소에 적용한 배경 이미지가 어느 기준에 부착(attachment)될지를 지정합니다. background-attachment 속성은 요소에 적용한 배경 이미지가 어느 기준에 부착(attachment)될지를 지정합니다. background-attachment 속성은 요소에 적용한 배경 이미지가 어느 기준에 부착(attachment)될지를 지정합니다. background-attachment 속성은 요소에 적용한 배경 이미지가 어느 기준에 부착(attachment)될지를 지정합니다. background-attachment 속성은 요소에 적용한 배경 이미지가 어느 기준에 부착(attachment)될지를 지정합니다. background-attachment 속성은 요소에 적용한 배경 이미지가 어느 기준에 부착(attachment)될지를 지정합니다.

뷰포트(viewport)는
웹 브라우저 용어로, 현재 창(또는 전체 화면 모드로 문서를 보고 있는 경우 화면)에 표시되는 문서의 부분으로 웹 페이지가 보여지는 영역을 의미합니다.

background-attachment 속성의 형식은 다음과 같습니다.

형식 구문

구문

CSS

/* 키워드 값 */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/* 글로벌 값 */
background-attachment: inherit;
background-attachment: initial;
background-attachment: revert;
background-attachment: revert-layer;
background-attachment: unset;

값

background-attachment 속성 값
`scroll`	초깃값임. 배경 이미지가 요소의 영역 자체에 부착되어 페이지가 스크롤될 때 함께 스크롤합니다. 배경 이미지의 크기(`background-size`) 기준이 요소의 영역 자체입니다. 배경 이미지의 시작 위치(`background-position`) 기준이 요소의 영역 자체입니다.
`fixed`	배경 이미지가 뷰포트(viewport)에 대해 고정되어(fixed) 부착합니다. 페이지가 스크롤될 때에도 배경 이미지는 함께 스크롤되지 않습니다. 배경 이미지의 크기(`background-size`) 기준이 뷰포트(viewport) 영역입니다. 배경 이미지의 시작 위치(`background-position`) 기준이 뷰포트(viewport) 영역입니다.
`local`	배경 이미지가 요소의 콘텐츠와 함께 부착되어 요소에 스크롤이 존재하면 배경 이미지은 콘텐츠와 함께 스크롤됩니다. 배경 이미지의 크기(`background-size`) 기준이 콘텐츠 영역입니다. 배경 이미지의 시작 위치(`background-position`) 기준이 콘텐츠 영역입니다.

부연설명
background-size 속성은 요소에 적용한 배경 이미지의 크기를 지정합니다.

부연설명
background-position 속성은 요소에 적용한 배경 이미지가 어디서부터 시작될지 위치를 지정합니다.

형식 정의

background-attachment 속성의 형식 정의
초깃값	`scroll`
적용 요소	모든 요소
상속	아니오
애니메이션	아니오

예제

다음의 예제들을 통해서 background-attachment 속성의 값에 따른 구현에 대해 자세히 살펴보겠습니다.

`scroll`

background-attachment: scroll;은 background-attachment 속성의 초깃값입니다.
background-attachment 속성을 설정하지 않으면 scroll 값이 적용된다는 의미입니다.

CSS

div {
    height: 200px;
    background-color: #00CED1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("earth.jpg");
    /* background-attachment 속성을 설정하지 않으면
       scroll 값이 적용된다는 의미입니다. */
}

코드 부연설명
background-position: center;는 배경 이미지를 배경 영역에서 가로 축과 세로 축 중앙에 배치합니다.

코드 부연설명
background-repeat: no-repeat;은 배경 이미지를 배경 영역에서 반복하지 않게 지정합니다.

배경 이미지가 요소의 영역 자체에 부착되어 페이지가 스크롤될 때 함께 스크롤합니다.

배경 이미지의 크기(background-size) 기준이 요소의 영역 자체입니다.
배경 이미지의 시작 위치(background-position) 기준이 요소의 영역 자체입니다.

`fixed`

CSS

div {
    height: 200px;
    background-color: #00CED1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("earth.jpg");
    background-attachment: fixed;
}

배경 이미지가 뷰포트(viewport)에 대해 고정되어(fixed) 부착합니다.
페이지가 스크롤될 때에도 배경 이미지는 함께 스크롤되지 않습니다.

배경 이미지의 크기(background-size) 기준이 뷰포트(viewport) 영역입니다.
배경 이미지의 시작 위치(background-position) 기준이 뷰포트(viewport) 영역입니다.

`local`

배경 이미지가 요소의 콘텐츠와 함께 부착되어 요소에 스크롤이 존재하면 배경 이미지은 콘텐츠와 함께 스크롤됩니다.

HTML

<div>
    <p>
        배경 이미지가 요소의 콘텐츠와 함께 부착되어
        요소에 스크롤이 존재하면
        배경 이미지은 콘텐츠와 함께 스크롤됩니다.
    </p>
    <p>
        배경 이미지가 요소의 콘텐츠와 함께 부착되어
        요소에 스크롤이 존재하면
        배경 이미지은 콘텐츠와 함께 스크롤됩니다.
    </p>
    <p>
        배경 이미지가 요소의 콘텐츠와 함께 부착되어
        요소에 스크롤이 존재하면
        배경 이미지은 콘텐츠와 함께 스크롤됩니다.
    </p>
    <p>
        배경 이미지가 요소의 콘텐츠와 함께 부착되어
        요소에 스크롤이 존재하면
        배경 이미지은 콘텐츠와 함께 스크롤됩니다.
    </p>
    <p>
        배경 이미지가 요소의 콘텐츠와 함께 부착되어
        요소에 스크롤이 존재하면
        배경 이미지은 콘텐츠와 함께 스크롤됩니다.
    </p>
</div>

CSS

div {
    height: 200px;
    background-color: #00CED1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("earth.jpg");
    background-attachment: local;
    overflow: auto;
    padding: 1em;
}
div p {
    color: white;
    font-size: 1.5em;
    text-shadow: 0 3px 3px #000;
    text-align: center;
}

배경 이미지가 요소의 콘텐츠와 함께 부착되어 요소에 스크롤이 존재하면 배경 이미지은 콘텐츠와 함께 스크롤됩니다.

배경 이미지의 크기(background-size) 기준이 콘텐츠 영역입니다.
배경 이미지의 시작 위치(background-position) 기준이 콘텐츠 영역입니다.

브라우저 호환성

background-attachment 속성의 브라우저 호환성
속성과 값	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`background-attachment`	1	12	1	1
`scroll`	1	12	1	1
`fixed`	1	12	2	15.4
`local`	1	12	2	15.4

명세서

background-attachment 속성의 명세서 사양
명세서 사양
`background-attachment`	CSS Backgrounds and Borders Module Level 3 #the-background-attachment

참고문헌

MDN - background-attachment

background-attachment 속성의 이해

형식 구문

구문

값

형식 정의

예제

scroll

fixed

local