글
배경이미지 고정하기
안녕하세요?
오늘은 배경에 이미지를 고정시키는 소스입니다. 보통 background로 이미지를 배경처리하면 중복되어서 출력이 됩니다. 근데 이 소스는 배경을 고정시키는 것입니다. 가운데 아래 왼쪽 아래 오른쪽 아래 이런식으로 배경이미지를 고정시키는 겁니다. 그럼 소스를 보시고 한번 영어해석한다 생각하시고 해석하시기 바랍니다.
배경 이미지 고정시키는 기본 소스
<body background="배경이미지주소"bgproperties="fixed">
배경을 가운데에 고정시키는 소스
<style>
body {background-color: #FFFFFF; background-attachment: fixed;
background-image: url(배경이미지주소);
background-repeat: no-repeat; background-position: center bottom}
</style>
배경을 오른쪽에 고정시키는 소스
<style>
body {background-color: #FFFFFF; background-attachment: fixed;
background-image: url(배경이미지주소);
background-repeat: no-repeat; background-position: right bottom}
</style>
배경을 왼쪽에 고정시키는 소스
<style>
body {background-color: #FFFFFF; background-attachment: fixed;
background-image: url(배경이미지주소);
background-repeat: no-repeat; background-position: left bottom}
</style>
예를들면
<style>
body {background-color: #FFFFFF; background-attachment: fixed;
background-image: url("char1.jpg");
background-repeat: no-repeat; background-position: center bottom}
</style>
이런식으로 url("char1.jpg") 이런식으로 주면 그 배경이 background-position이 right bottom이면 오른쪽 아래 left bottom이면 왼쪽 아래, center bottom이면 가운데 아래 이렇게 출력이 됩니다. 중복은 background-repeat:no-repeat 이걸 해석해보면 배경반복-반복없음 이지요. 그래서 배경이 반복해서 나타나는 것을 없애고 한번만 나타납니다.
오늘은 여기까지 그럼 다음시간에 또 만나요~
'HTML' 카테고리의 다른 글
| 좌,우,중앙정렬되는 메뉴 (0) | 2011.10.04 |
|---|---|
| 밑줄그어지는 메뉴 (0) | 2011.10.02 |
| 이미지의 테두리를 점선으로 (0) | 2011.09.25 |
| 글자아래 점선밑줄긋기 (0) | 2011.09.21 |
| 이미지 경계선 항상 없애기 (0) | 2011.09.10 |
