background
background 속성은 백그라운드 속성을 일괄적으로 설정합니다.
background 속성은 CSS를 통해 이미지를 표현하는 방법으로 HTML에 <img> 태그와 비교가 됩니다.
이미지의 의미가 있다면 <img> 태그를 사용하고, 의미가 없고 장식용에 가깝다면 background 속성을 이용합니다.
background 속성은 고정, 위치, 컬러, 기준점, 반복, 사이트를 통해 컨트롤 할 수 있습니다.
background
background 속성은 백그라운드 속성을 일괄적으로 설정합니다.
특징 | 설명 |
---|---|
기본 값 |
background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto auto; |
적용 | background |
버전 | CSS1 |
사용성 | ★★★★★ |
정의(Definition)
- background 속성은 백그라운드 속성을 일괄적으로 설정합니다.
애니메이션과 관련된 속성(Animation Related Properties)
- background 속성은 백그라운드 속성을 일괄적으로 설정합니다.
- background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.
- background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.
- background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
- background-color 속성은 백그라운드 색을 설정합니다.
- background-image 속성은 백그라운드 이미지 및 배경 속성을 설정합니다.
- background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
- background-position 속성은 백그라운드 이미지의 위치 영역을 설정합니다.
- background-repeat 속성은 백그라운드 이미지 반복 여부를 설정합니다.
- background-size 속성은 백그라운드 이미지 사이즈를 설정합니다.
문법(Syntax)
background : background-attachment | background-clip | background-color | background-image | background-origin | background-position | background-repeat | background-size | inherit;
/* 이미지, 반복(background-image | background-repeat) */
background: url(../images/images01.jpg) no-repeat;
/* 이미지, 반복, 위치(background-image | background-repeat | background-position) */
background: url(../images/images01.jpg) no-repeat 50% 70%;
/* 색상, 이미지, 반복, 위치(background-color | background-image | background-repeat | background-position) */
background: #000 url(../images/images01.jpg) no-repeat 50% 70%;
속성(Property)
속성값 | 설명 |
---|---|
background-attachment | 배경 이미지의 고정 여부를 설정합니다. |
background-clip | 백그라운드 이미지의 위치 기준점을 설정합니다. |
background-color | 백그라운드 색을 설정합니다. |
background-image | 백그라운드 이미지 및 배경 속성을 설정합니다. |
background-origin | 백그라운드 이미지의 위치 기준점을 설정합니다. |
background-position | 백그라운드 이미지의 위치 영역을 설정합니다. |
background-repeat | 백그라운드 이미지 반복 여부를 설정합니다 |
background-size | 백그라운드 이미지 사이즈를 설정합니다. |
inherit | 속성 값을 상위 요소한테 상속받습니다. |
호환성(Compatibility)
6 | 7 | 8 | 9 | 10 | 11 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
background | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
background-attachment | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
background-blend-mode | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
background-clip | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ |
background-color | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
background-image | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
background-origin | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ |
background-position | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
background-repeat | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
background-size | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ |