[CSS] background

background

숏컷 속성으로써 color, image, repeat, attachment, position 순서로 선언한다.

• background-color 속성만 순서에 독립적이다.
• 콘텐츠, 패딩, 보더 영역에 적용된다.

background-color

항목	설명
값	color, transparent
초기값	transparent
적용 대상	모든 요소
상속	X

background-image

항목	설명
값	uri, none
초기값	none
적용 대상	모든 요소
상속	X

• background-image와 함께 background-color를 선언할 수 있다.
• 특별한 ratio 없이 배경 이미지에 본래 정해진 치수가 있을 경우, background-position 속성을 통해 배경 이미지의 위치를 조절할 수 있다.

CSS3에서 background-image는 중첩이 가능하다.

background-image: url(flower.png), url(ball.png), url(grass1.png);

당연히 position등도 중첩이 가능하다.

background-position: 0 0, 10px 10px;

background-repeat

항목	설명
값	repeat, repeat-x, repeat-y, no-repeat
초기값	repeat
적용 대상	모든 요소
상속	X

background-image가 선언된 경우, background-repeat의 초기 값이 repeat으로 지정되어있으므로, 배경 이미지가 요소의 콘텐츠, 패딩, 보더영역을 반복해서 커버한다.

1. 값

repeat

수평, 수직 반복

repeat-x

수평으로만 반복

repeat-y

수직으로만 반복

no-repeat

반복 X

background-attachment

항목	설명
값	scroll, fixed
초기값	scroll
적용 대상	모든 요소
상속	X

배경이미지의 스크롤 시 렌더링 동작을 결정한다.

1. 값

fixed

배경 이미지가 뷰포트에 고정된다.

scroll

컨테이닝 블록을 따라 스크롤링 된다.

background-position

항목	설명
값	[percentage, length, left, center, right] [percentage, length, top, center, bottom]
초기값	0% 0%
적용 대상	모든 요소
상속	X

• 값은 수평 위치, 수직 위치를 순서대로 선언.
• 음수도 가능함

1. 값

percentage

요소의 패딩박스의 왼쪽 상단을 기준으로 함.
0% 0% = 배경 이미지의 상단 왼쪽 꼭지점이 요소 패딩 영역의 왼쪽 상단에 맞물린다.
100% 100% = 배경 이미지의 하단 오른쪽 꼭지점이 요소 패딩 영역의 오른쪽 하단에 맞물린다.

내가 생각하기에 요소의 패딩영역 왼쪽 위 꼭지점을 기준으로

(요소의 패딩영역 - 배경 이미지의 크기)

에 대한 비율만큼 오른쪽으로, 아래쪽으로 배경 이미지를 옮긴다. (음수일 경우는 방향이 반대)

그래서그런지 background-size:100% ~~; 일 때, background-position을 퍼센트로 주니 안먹는다…

length

배경 이미지를 요소 패딩 박스의 왼쪽 상단을 기준으로 한 거리만큼 옮긴다.

top

수직 0%와 동일

bottom

수직 100%와 동일

left

수평 0%와 동일

right

수평 100%와 동일

center

경우에 따라 수평 50% 혹은 수직 50%와 동일

background-repeat

값

space

배경 이미지가 잘리지 않도록 background positioning area 안에 자동 간격 배치된다.
첫번째와 마지막 이미지가 영역의 모서리에 닿게끔 배치된다.
background painting area가 positioning area보다 클 경우, painting area에 반복해서 채워진다.

round

background positioning area 안에 딱 맞도록 이미지가 리사이징돼서 배치된다.
background painting area가 positioning area보다 클 경우, painting area에 반복해서 채워진다.

background-clip

항목	설명
값	border-box, padding-box, content-box
초기값	border-box
적용 대상	모든 요소
상속	X

background painting area를 정의한다
html, body와 같은 root E는 특별한 painting area를 가지기 때문에 해당 속성이 적용되지 않는다.

1. 값

border-box

배경이 border-box 안에서 그려진다

padding-box

배경이 padding-box 안에서 그려진다

content-box

배경이 content-box 안에서 그려진다

background는 border 뒤에(behind) 있다!

background-origin

항목	설명
값	border-box, padding-box, content-box
초기값	padding-box
적용 대상	모든 요소
상속	X

background positioning area를 정의한다.
background-repeat이 repeat일 경우 사용할 이유가 없을 것 같다.

1. 값

padding-box

배경의 위치가 padding-box 상대적으로 결정된다.

border-box

배경의 위치가 border-box 상대적으로 결정된다.

content-box

배경의 위치가 content-box 상대적으로 결정된다.

background-clip과 background-origin은 painting area를 취급하느냐, positioning area를 취급하느냐에 차이가 있다.
background-image를 사용할 때와 (no-repeat과 repeat 유의) background-color를 사용할 때를 구분하여 사용하는 것이 좋을 것 같다.

background-size

항목	설명
값	contain, cover, length, percentage
초기값	auto
적용 대상	모든 요소
상속	X

배경 이미지의 크기를 정의한다.

1. 값

contain

배경 이미지의 비율을 유지하면서 이미지의 크기를 조절한다.
배경이 bg positioning area에 딱 맞게 들어갈 수 있는 최대 사이즈로 조절된다.

예시

1. 배경 이미지 크기가 300*300 일 때

• width:auto; height:300px;

• width:200px; height:300px;

• width:300px; height:200px;

2. 배경 이미지 크기가 1000*300 일 때

• width:auto; height:300px;

cover

배경 이미지의 비율을 유지하면서 이미지의 크기를 조절한다.
배경이 bg positioning area에 덮어 질 수 있는 최소 사이즈로 조절된다.

예시

1. 배경 이미지 크기가 300*300 일 때

• width:auto; height:300px;

• width:200px; height:300px;

• width:300px; height:200px;

2. 배경 이미지 크기가 1000*300 일 때

• width:auto; height:300px;

3. 배경 이미지 크기가 300*600 일 때

• width:auto; height:600px;

length

percentage

---

https://www.w3.org/TR/CSS22/colors.html#background

​