CSS - 배경(background)

전체개요

background 속성은 태그의 배경을 지정하는 속성. font 태그와 비슷하게 세부 속성들을 한 번에 쓸 수 있음.

1. background-color

배경색을 의미.
태그의 크기가 없을 경우 배경색은 표기되지 않음.

2. background-image

• 기본값: background-image의 크기는 원본 사이즈 그대로 표시되며, 컨테이너 크기보다 작으면 이미지는 반복되어 표시됨.

  < 문법 >
  background-image:url('이미지 경로');

3. background-size

배경 이미지의 가로 크기와 세로 크기를 정할 수 있음

• 기본값: auto
• 상속: no
• 애니메이션: yes
• 버전: css level3

< 문법 >
background-size: auto | length | cover | contain | initial | inherit

• auto: 이미지 크기를 유지 (이미지가 컨테이너 사이즈보다 클 경우 이미지 잘림)
• length: 값을 두 개 넣으면 첫 번째 값이 가로 크기, 두 번째 값이 세로 크기. 값을 한 개 넣으면 가로 크기이며, 세로 크기는 원본 이미지의 가로 세로 비율에 맞게 자동으로 정해짐. 백분율을 사용할 수도 있음.
  
• cover: 배경을 사용하는 요소를 다 채울 수 있게 이미지를 확대 또는 축소. 가로 세로 비율 유지.
  
• contatin: 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 or 축소. 가로 세로 비율 유지. (조정된 이미지가 컨테이너보다 작을 경우 남은 여백에 이미지 반복됨)
  

TIP: 백분율로 크기를 정할 때의 기준은 이미지 크기가 아니라 배경을 사용하는 요소의 크기임

4. background-repeat

• 기본값: 컨테이너보다 작은 이미지를 사용하면 이미지가 반복되어 출력.

  < 문법 >
  background-repeat: no-repeat | repeat-x | repeat-y | repeat

5. background-position

배경 이미지의 좌표를 수정할 수 있음

• 기본값: 왼쪽 위부터 이미지 출력
• 속성값: pixel(px), left, top, center, bottom, right
• 입력방법: 띄어쓰기를 기준으로 x좌표, y좌표 지정

< 문법 >
background-potition: x좌표 y좌표;

참고 사이트

6. background-attachment

배경 이미지의 스크롤 여부를 정함

• 기본값: scroll
• 상속: NO
• 애니메이션: NO
• 버전: css level1

< 문법 >
background-attachment: scroll | fixed | local | initial | inherit;

• scroll: 바깥을 스크롤하면 선택한 요소와 같이 움직임. 내용을 스크롤하면 배경 이미지는 스크롤되지 않음.
• fixed: 움직이지 않음.
• local: 바깥을 스크롤하면 선택한 요소와 같이 움직임. 내용을 스크롤하면 배경 이미지도 스크롤됨.

참고 사이트