[html/css]background-attachment 속성(배경이미지 고정)

[html/css]background-attachment 속성(배경이미지 고정)

차례 :

background-image
background-repeat
background-attachment
background-position
background-size
background

배경이미지를 넣을 때는 background-image 속성,

배경이미지 패턴을 선택할 때는 background-repeat 속성을 배웠습니다. (위에 링크 참조)

오늘은 배경 이미지를 어떻게 고정할지 결정하는 background-attachment 속성입니다.

background-attachment 속성

: 배경 이미지 고정 방식

▶속성값

scroll 기본값으로, 이미지가 요소에 상대적인 위치.

fixed 이미지가 윈도우 창에 상대적인 위치.

(스크롤바을 내려도 이미지 위치가 그대로임)

local 스크롤할 때 요소의 내용에 상대적인 위치.

*local은 많이 쓰지는 않은데요, 작은 박스 안에 overflow: auto; 처럼 자동으로 스크롤이 생길 경우

배경 이미지는 스크롤되지 않습니다. local를 쓰면 내용과 함께 스크롤 됩니다.

*local 속성은 IE9+, Safari 5+, Chrome, Opera 에서만 지원

그럼 실제 html/css를 작성해서 사용해 보도록 하겠습니다.

배경이미지로 넣을 그림 ↓

html/css

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div{
width: 700px;
height: 500px;
background-image: url('brabbit.png');
background-repeat: no-repeat;
background-attachment: scroll;
}
</style>
</head>

실행화면

background-attachment: scroll 적용화면 :scroll.htm

스크롤바를 맨 아래로 내리니 이미지도 따라 올라 갑니다

background-attachment: fixed 적용화면:fixed.htm

스크롤바를 맨 아래로 내려도 이미지가 고정된 위치에 있습니다

background-attachment: local은 아래 세 파일을 비교해서 보세요.

단 IE9+, Safari 5+, Chrome, Opera 에서만 local 속성값이 적용됩니다

background-attachment scroll.htm

background-attachment fixed.htm

background-attachment local.htm

oveflow 속성 (oveflow: visible, hidden, scroll, auto 차이)

DIV 태그를 이용하여 레이아웃 만들기

CSS란? (HTML과 CSS의 차이, CSS 작성법)

'css' 카테고리의 다른 글

[html/css] line-height 속성 배우기 (6)	2014.05.27
[html/css]background-position 속성(배경이미지 위치 지정) (5)	2014.05.26
[html/css] background-repeat 속성(배경 이미지 패턴) (3)	2014.05.22
[html/css]배경 이미지를 넣는 background-image 속성 (3)	2014.05.21
[html/css] 글자색 color 속성, 배경색 background-color 속성 배우기 (1)	2014.05.20