반응형
배경 이미지 고정되게 처리하기
body {
background-image: url(bg.gif);
background-attachment: fixed;
background-repeat: no-repeat
}
배경의 그림을 스크롤링의 설정 background-attachement 속성의 fixed 값을 통해서 처리한다.
CSS background-attachment Property
http://www.w3schools.com/cssref/pr_background-attachment.asp
Definition and Usage
The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.
| Default value: | scroll |
|---|---|
| Inherited: | no |
| Version: | CSS1 |
| JavaScript syntax: | object.style.backgroundAttachment="fixed" |
Property Values
| Value | Description |
|---|---|
| scroll | The background scrolls along with the element. This is default |
| fixed | The background is fixed with regard to the viewport |
| local | The background scrolls along with the element's contents |
배경 고정 예제 파일
배경고정_fixed.zip반응형
'Web > WEB기본' 카테고리의 다른 글
| [CSS] CSS3 Scrollbar, jQuery scrollbar (Webkit용) (0) | 2014.01.10 |
|---|---|
| [CSS] 글자색상 -webkit-text-fill-color:initial (0) | 2014.01.07 |
| [CSS] 글 포인트 주기 border-left-width이용 (0) | 2014.01.02 |
| [CSS] CSS 글 자간 줄간 설정 (0) | 2013.12.17 |
| [CSS] CSS Values and Units Module Level 3 수치 단위 (0) | 2013.10.24 |
| [CSS] CSS 속성 inherit 상속받기 (0) | 2013.10.23 |
| [CSS] Image vertical align with CSS, avoid absmiddle 효과 (0) | 2013.10.12 |
| [CSS] CSS 애니메이션 처리 (0) | 2013.10.12 |
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)
(로그인하지 않으셔도 가능)