div {
height: 100px;
overflow: auto;
background-image :url('http://ezcode.kr/study/css/img/tulip.png');
border:1px solid black;
}
.ex1 {
background-attachment: scroll;
}
.ex2 {
background-attachment: fixed;
}
.ex3 {
background-attachment: local;
}
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body>
<h1>background-attachment</h1>
<p>background-attachment: scroll</p>
<div class="ex1">
기본값, 이 배경이미지는 콘텐츠 영역과 함께 스크롤 됩니다<br>
기본값, 이 배경이미지는 콘텐츠 영역과 함께 스크롤 됩니다<br>
기본값, 이 배경이미지는 콘텐츠 영역과 함께 스크롤 됩니다<br>
기본값, 이 배경이미지는 콘텐츠 영역과 함께 스크롤 됩니다<br>
기본값, 이 배경이미지는 콘텐츠 영역과 함께 스크롤 됩니다<br>
기본값, 이 배경이미지는 콘텐츠 영역과 함께 스크롤 됩니다<br>
기본값, 이 배경이미지는 콘텐츠 영역과 함께 스크롤 됩니다<br>
기본값, 이 배경이미지는 콘텐츠 영역과 함께 스크롤 됩니다<br>
기본값, 이 배경이미지는 콘텐츠 영역과 함께 스크롤 됩니다<br>
</div>
<hr>
<p>background-attachment: fixed</p>
<div class="ex2">
이 배경이미지는 페이지에 고정되어 있고 콘텐츠 영역만 스크롤 됩니다.<br>
이 배경이미지는 페이지에 고정되어 있고 콘텐츠 영역만 스크롤 됩니다.<br>
이 배경이미지는 페이지에 고정되어 있고 콘텐츠 영역만 스크롤 됩니다.<br>
이 배경이미지는 페이지에 고정되어 있고 콘텐츠 영역만 스크롤 됩니다.<br>
이 배경이미지는 페이지에 고정되어 있고 콘텐츠 영역만 스크롤 됩니다.<br>
이 배경이미지는 페이지에 고정되어 있고 콘텐츠 영역만 스크롤 됩니다.<br>
이 배경이미지는 페이지에 고정되어 있고 콘텐츠 영역만 스크롤 됩니다.<br>
이 배경이미지는 페이지에 고정되어 있고 콘텐츠 영역만 스크롤 됩니다.<br>
</div>
<hr>
<p>background-attachment: local;</p>
<div class="ex3">
이 배경이미지는 요소의 콘텐츠와 함께 스크롤 됩니다.<br>
이 배경이미지는 요소의 콘텐츠와 함께 스크롤 됩니다.<br>
이 배경이미지는 요소의 콘텐츠와 함께 스크롤 됩니다.<br>
이 배경이미지는 요소의 콘텐츠와 함께 스크롤 됩니다.<br>
이 배경이미지는 요소의 콘텐츠와 함께 스크롤 됩니다.<br>
이 배경이미지는 요소의 콘텐츠와 함께 스크롤 됩니다.<br>
이 배경이미지는 요소의 콘텐츠와 함께 스크롤 됩니다.<br>
이 배경이미지는 요소의 콘텐츠와 함께 스크롤 됩니다.<br>
</div>
</body>
</html>