background

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	○	○	○	○	○	❌	❌	❌	❌	○	○	○	○	○

참고 사이트(Reference)

• MDN

---