background 속성은 배경 효과를 정의하는데 사용됩니다.
| 속성 | 설명 |
|---|---|
| background-color | 배경색을 지정합니다. |
| background-clip | 배경색상이 적용되는 영역을 지정합니다. |
| background-image | 배경이미지를 지정합니다. |
| background-repeat | 배경이미지의 반복 여부를 지정합니다. |
| background-attachment | 배경이미지를 고정시킬지 스크롤되도록 할지 여부를 지정합니다. |
| background-position | 배경이미지의 시작위치를 지정합니다. |
| background-origin | 배경이미지가 시작하는 기준 위치를 지정합니다. |
| background-size | 배경이미지의 크기를 지정합니다. |
| background-blend-mode | 배경이미지/색상의 합성모드를 지정합니다. |
| background | background의 모든 속성을 일괄 적용할때 사용합니다 |
background-color: color|transparent|initial|inherit;
배경색을 지정합니다.
transparent는 배경색을 투명하게 지정합니다.
background-clip: border-box|padding-box|content-box|initial|inherit;
배경색상이 적용되는 영역을 지정합니다.
| border-box | 기본값, 배경속성이 border 영역에서 시작하도록 지정합니다 |
| padding-box | 배경속성이 padding 영역에서 시작하도록 지정합니다. |
| content-box | 배경속성이 content 영역에서 시작하도록 지정합니다. |
background-image: none|url('URL')|gradient()|initial|inherit;
배경이미지를 지정합니다.
두개이상의 배경이미지를 지정할때에는 ,로 구하여 지정합니다.
참고 : IE8 버전은 이하는 한 요소에서 여러 배경 이미지를 지원하지 않습니다.
| none | 기본값, 배경이미지를 지정하지 않습니다. | ||||||||
| url('URL') | 이미지 경로를 지정하여 배경이미지를 표시합니다. | ||||||||
| gradient() |
그라디언트 함수를 이용하여 배경에 그라디언트를 적용합니다.
|
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
배경이미지의 반복 여부를 지정합니다.
| repeat | 기본값, 배경이미지를 수평/수직 방향으로 반복 |
| repeat-x | 배경이미지를 수평 방향으로 반복 |
| repeat-y | 배경이미지를 수직 방향으로 반복 |
| no-repeat | 배경이미지를 반복하지 않음 |
| space | 배경을 채우는 영역의 경계에서 이미지가 잘리지 않도록 반복이미지 사이에 공백을 조정 |
| round | 배경을 채우는 영역의 경계에서 이미지가 잘리지 않도록 반복이미지 크기를 조정(간격없음) |
background-attachment: scroll|fixed|local|initial|inherit;
배경이미지를 고정시킬지 스크롤되도록 할지 여부를 지정합니다.
| scroll | 기본값, 배경이미지가 콘텐츠 영역과 함께 스크롤 되도록 지정 |
| fixed | 배경이미지는 고정되어 있고 콘텐츠 영역만 스크롤 되도록 지정 |
| local | 요소내부의 콘텐츠 영역과 함께 배경이미지가 스크롤 되도록 지정 |
background-position: value|xpos ypos;
배경이미지의 시작위치를 지정합니다.
기본적으로 이미지는 왼쪽 상단에 배치됩니다.
| value |
수평 :left, center, right 수직 :top, center, bottom 두 단어를 조합하여 사용합니다. |
| xpos ypos | % 또는 px 등의 단위로 수평, 수직 방향 지정합니다. (음수 지정가능) |
background-origin: padding-box|border-box|content-box|initial|inherit;
배경이미지가 시작하는 기준 위치를 지정합니다.
background-attachment:fixed 이면 적용되지 않습니다.
| padding-box | 기본값, 배경이미지가 padding 영역의 왼쪽 상단에서 시작하도록 지정 |
| border-box | 배경이미지가 border 영역 왼쪽 상단에서 시작하도록 지정 |
| content-box | 배경이미지가 content 영역 왼쪽 상단에서 시작하도록 지정 |
background-size: auto|length|cover|contain|initial|inherit;배경이미지의 크기를 지정합니다.
| auto | 기본값, 이미지의 원래 크기로 표시 |
| length | 이미지의 width, height에 해당 하는 단위로 지정(하나의 값만 입력하면 height는 auto) |
| cover | 전체 컨테이너를 덮도록 배경이미지의 크기를 조정함 |
| contain | 배경이미지의 크기가 조정되어 이미지가 완전히 보이도록 함 |
background-blend-mode: value;
배경이미지/색상의 합성모드를 지정합니다.
합성 모드는 다음과 같습니다.
background: bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment |initial|inherit;background의 모든 속성을 일괄 적용할때 사용합니다
bg-position과 bg-size는 /로 구분하여 적용하여야 합니다.
다음과 같은 경우
background:url(smiley.gif) 10px 20px/50px 50px;