예
고정 된 배경 이미지를 지정하는 방법 :
body
{
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
}
»그것을 자신을 시도 더 "Try it Yourself" 아래의 예.
정의 및 사용
배경 - 첨부 파일 속성은 배경 이미지가 고정 또는 페이지의 나머지 부분과 스크롤 여부를 설정합니다.
| 기본값: | scroll |
|---|---|
| 상속 : | no |
| 애니메이션 : | no. Read about animatable |
| 번역: | CSS1 |
| 자바 스크립트 구문 : | object .style.backgroundAttachment="fixed" Try it |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| background-attachment | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: 인터넷 익스플로러 8 이전 버전은 하나의 요소에 여러 개의 배경 이미지를 지원하지 않습니다.
CSS 구문
background-attachment: scroll|fixed|local|initial|inherit;속성 값
| 값 | 기술 |
|---|---|
| scroll | 요소와 함께 배경 스크롤합니다. 이 기본이다 |
| fixed | 배경은 뷰포트에 대하여 고정 |
| local | 요소의 내용과 함께 배경 스크롤 |
| initial | 기본값으로이 속성을 설정합니다. 초기에 대해 알아보기 |
| inherit | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 |
더 예
예
간단한 시차 스크롤 효과를 만드는 방법 (create an illusion of 3D depth) :
.fixed-bg {
/* The background image */
background-image: url("img_tree.gif");
/* Set a specified height, or the minimum height for the background image */
min-height: 500px;
/* Set background image to fixed
(don't scroll along with the page) */
background-attachment: fixed;
/* Center the background
image */
background-position: center;
/* Set the background image to no repeat */
background-repeat: no-repeat;
/* Scale the background
image to be as large as possible */
background-size:
cover;
}
»그것을 자신을 시도 관련 페이지
CSS 자습서 : CSS 배경
HTML DOM 참조 : backgroundAttachment 등록