속성 background-attachment

속성 background-attachment는 요소의 배경 이미지를 어떻게 스크롤할지 설정합니다: 텍스트와 함께 스크롤되거나 텍스트가 이미지 위를 스크롤되도록 합니다.

구문

선택자 {
	background-attachment: fixed | scroll | local;
}

값

값	설명
`fixed`	배경 이미지는 고정되고, 텍스트는 그 위를 스크롤됩니다.
`scroll`	배경 이미지가 텍스트와 함께 스크롤됩니다.
`local`	요소의 동작을 고려하여 배경이 고정됩니다. 요소에 스크롤이 있는 경우, 배경은 콘텐츠와 함께 스크롤되지만, 요소 경계를 벗어난 배경은 제자리에 남아 있습니다.

기본값: scroll.

예시 . scroll 값

현재 속성 background-attachment가 scroll 값으로 설정되어 있습니다. 요소를 수직으로 스크롤해 보세요 - 텍스트가 배경과 함께 스크롤되는 것을 볼 수 있습니다:

<body>
	<div id="elem">
		some long text
	</div>
</body>

body {
	background-attachment: scroll;
	background-image: url("bg.png");
}

#elem {
	width: 400px;
	margin: 0 auto;
	text-align: justify;
	font-weight: bold;
	font-size: 20px;
}

예시 . fixed 값

이제 속성 background-attachment가 fixed 값으로 설정되어 있습니다. 요소를 수직으로 스크롤해 보세요 - 텍스트가 배경 위를 스크롤하는 것을 볼 수 있습니다:

<body>
	<div id="elem">
		some long text
	</div>
</body>

body {
	background-attachment: fixed;
	background-image: url("bg.png");
}

#elem {
	width: 400px;
	margin: 0 auto;
	text-align: justify;
	font-weight: bold;
	font-size: 20px;
}

함께 보기

속성 background,
배경에 대한 단축 속성입니다.