background-attachment

background-attachment

background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다. 백그라운드를 배경에 고정하여 효과를 주는 기법입니다. 패럴랙스 스크롤링 사이트에서 자주 사용하는 방법 중에 하나입니다.

---

background-attachment

background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.

특징	설명
기본 값	background-attachment: scroll;
적용	background
버전	CSS1
사용성	★★★☆☆

정의(Definition)

• background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.
• background-attachment 속성의 multiple backgrounds는 익스플로러9 버전 이상부터 지원됩니다.

백그라운드와 관련된 속성(Background Related Properties)

• background 속성은 백그라운드 속성을 일괄적으로 설정합니다.
• background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.
• background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.
• background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
• background-color 속성은 백그라운드 색을 설정합니다.
• background-image 속성은 백그라운드 이미지 및 배경 속성을 설정합니다.
• background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
• background-position 속성은 백그라운드 이미지의 위치 영역을 설정합니다.
• background-repeat 속성은 백그라운드 이미지 반복 여부를 설정합니다.
• background-size 속성은 백그라운드 이미지 사이즈를 설정합니다.

문법(Syntax)

background-attachment : scroll | fixed | local;

 /* 기본 속성 */
background-attachment : scroll;
background-attachment : fixed;
background-attachment : local;

/* 이미지를 여러개 사용했을 경우 */
background-attachment: local, scroll;

속성(Property)

속성값	설명
scroll	배경이미지와 콘텐츠를 표현하는 기본값입니다.
fixed	배경이미지를 고정하고, 콘텐츠만 움직입니다.
local	배경이미지와 콘텐츠가 같이 움직입니다.

예제1(Sample)

배경이미지의 고정여부를 설정하는 예제입니다.

• background 속성은 애니메이션 속성을 설정합니다.
• background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.
• background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.
• background-clip 속성은 배경 이미지의 위치 기준점을 설정하기 위한 속성입니다.
• background-color 속성은 배경 색을 설정합니다.
• background-image 속성은 배경 이미지 및 배경 속성을 설정합니다.
• background-origin 속성은 배경 이미지의 위치 기준점을 설정하기 위한 속성입니다.
• background-position 속성은 배경 이미지의 위치 영역을 설정합니다.
• background-repeat 속성은 배경 이미지 반복 여부를 설정합니다.
• background-size 속성은 배경 이미지 사이즈를 설정합니다.
• background 속성은 애니메이션 속성을 설정합니다.
• background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.
• background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.
• background-clip 속성은 배경 이미지의 위치 기준점을 설정하기 위한 속성입니다.
• background-color 속성은 배경 색을 설정합니다.
• background-image 속성은 배경 이미지 및 배경 속성을 설정합니다.
• background-origin 속성은 배경 이미지의 위치 기준점을 설정하기 위한 속성입니다.
• background-position 속성은 배경 이미지의 위치 영역을 설정합니다.
• background-repeat 속성은 배경 이미지 반복 여부를 설정합니다.
• background-size 속성은 배경 이미지 사이즈를 설정합니다.

background-attachment: scroll; background-attachment: fixed; background-attachment: local;

버튼을 누르고 스크롤을 하면 차이점을 확인할 수 있습니다.

HTML

CSS

SCRIPT

<div class="background-box">
    <div class="box">
        <ul>
            <li>background 속성은 애니메이션 속성을 설정합니다.</li>
            <li>background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.</li>
            <li>background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.</li>
            <li>background-clip 속성은 배경 이미지의 위치 기준점을 설정하기 위한 속성입니다.</li>
            <li>background-color 속성은 배경 색을 설정합니다.</li>
            <li>background-image 속성은 배경 이미지 및 배경 속성을 설정합니다.</li>
            <li>background-origin 속성은 배경 이미지의 위치 기준점을 설정하기 위한 속성입니다.</li>
            <li>background-position 속성은 배경 이미지의 위치 영역을 설정합니다.</li>
            <li>background-repeat 속성은 배경 이미지 반복 여부를 설정합니다.</li>
            <li>background-size 속성은 배경 이미지 사이즈를 설정합니다.</li>
            <li>background 속성은 애니메이션 속성을 설정합니다.</li>
            <li>background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.</li>
            <li>background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.</li>
            <li>background-clip 속성은 배경 이미지의 위치 기준점을 설정하기 위한 속성입니다.</li>
            <li>background-color 속성은 배경 색을 설정합니다.</li>
            <li>background-image 속성은 배경 이미지 및 배경 속성을 설정합니다.</li>
            <li>background-origin 속성은 배경 이미지의 위치 기준점을 설정하기 위한 속성입니다.</li>
            <li>background-position 속성은 배경 이미지의 위치 영역을 설정합니다.</li>
            <li>background-repeat 속성은 배경 이미지 반복 여부를 설정합니다.</li>
            <li>background-size 속성은 배경 이미지 사이즈를 설정합니다.</li>
        </ul>
    </div>
</div>

.background-box .box {
    background-image: url(https://tistory3.daumcdn.net/tistory/2933724/skin/images/blend08.jpg);
    background-attachment: scroll;
    background-repeat: repeat-x;
    background-position: center;
    overflow-y: scroll;
    height: 300px;
}

//Javascript none

호환성(Compatibility)

						6	7	8	9	10	11
background-attachment	○	○	○	○	○	○	○	○	○	○	○	○	○	○

참고 사이트(Reference)

• MDN
• W3C

---