Summary
각 개별 배경 속성들을 한번에 지정하는 약식 속성입니다.
값 | [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit |
---|---|
기본값 | 각 개별 속성들 참고 |
적용대상 | 모든요소 |
상속 | 상속안됨 |
퍼센테이지 | background-position에만 허용 |
미디어 | Visual |
Value
background-color
- 색상값 : #f00, #ff0000, rgb (250, 0, 0), red등으로 표현
- transparent [default 값]
- inherit
background-image
- <url> : 배경 이미지를 지정할 경로
- none : 이미지가 사용되지 않음.
- inherit
background-repeat
- repeat [default값] : 배경 이미지가 수직과 수평으로 반복
- repeat-x : 수평으로 만 반복
- repeat-y : 수직으로 만 반복
- no-repeat : 반복되지 않고, 이미지가 한번만 나타난다.
- inherit
background-attachement
- scroll [default값] : 배경이미지가 화면에 따라 스크롤
- fixed : 배경 이미지를 화면에 고정
- inherit
background-position [sample]
- 백분율 | 백분율
- 값이 '0% 0%': 배경이미지가 패딩을 포함한 컨텐츠 영역의 맨위 오른쪽부터 나타난다.
- 값이 '100% 100%': 배경이미지가 패딩을 포함한 컨텐츠 영역의 맨아래 오른쪽에 나타난다.
- 값이 '20% 80%': 배경이미지의 오른쪽에서 20% 아래로 80%의 지점이 패딩을 포함한 컨텐츠 영역의 오른쪽으로 20% 아래로 80% 지점에서 나타난다.
- 길이 | 길이
- 값이 '2em 2em'이라면 배경 이미지의 맨위 왼쪽부터 패딩을 포함한 컨텐츠 영역의 맨위 왼쪽 모서리에서 오른쪽 2em, 아래쪽 2em에 나타난다.
- [top or center or bottom] | [left or center or right] : center는 생략할수 있다. 즉 background-position: top center; 는 background-position: top;과 같다.
- inherit
Tip
- 다음은 똑같은 속성값을 가지는 배경을 다르게 설정하는 방법입니다. [sample : 스크롤바를 움직여 보세요 ]
.div1 { background: url("image.jpg") #666 50% repeat fixed; } .div2 { background-image: url("image.jpg"); background-color: #666; background-position: 50%; background-repeat: repeat; background-attachment: fixed; }