#TIL11

오늘은 background 속성에 대해 정리해 보려고 한다.

background-color

• 요소의 배경색상을 지정할 때 사용
• 기본값: transparent(투명한)

background-image

• 요소의 배경이미지를 지정할 때 사용
• 기본값: none(이미지 없음)
• url("경로") url()함수 이용하여 이미지 경로 지정
• ex) background-image: url("./images/bg.png");

background-repeat

• 요소의 배경이미지 반복여부 설정
• 값:
  repeat(기본값) : 이미지를 수직, 수평 반복
  repeat-x : 이미지를 수평 반복
  repeat-y : 이미지를 수직 반복
  no-repeat: 반복 없음

background-position

• 요소의 배경이미지 위치 지정
• background-position: 가로 세로;
• 키워드 값: left, right, center => 가로, top, bottom, center => 세로
• px, em, rem, % 등의 단위로도 지정 가능

background-size

• 요소의 배경이미지 크기 지정
• 값:
  auto(기본값) - 이미지의 실제 크기
  cover - 비율유지, 요소의 더 넓은 너비에 맞춤
  contain - 비율유지, 요소의 더 짧은 너비에 맞춤
  단위로 지정 - px, em, rem, % 등

background-attachment

• 요소의 배경이미지 스크롤 특성 지정
• 값:
  scroll(기본값) - 이미지가 요소를 따라서 같이 스크롤
  fixed - 이미지가 뷰포트에 고정, 스크롤 되지 않음

background 단축속성

• background: color | image | repeat | position | attachment
• 해당 속성의 기본값은 생략가능
• ex) background: orange url("./images/bg.png") no-repeat left top fixed;

background image 중첩 사용

• 배경이미지는 중첩사용이 가능하며 단축속성 사용시 color는 맨마지막에 작성해야 하며 생략 가능하다.
• background:
  url("./img/box1.png") repeat-x left top,
  url("./img/box2.png") repeat-y right top,
  url("./img/box3.png") no-repeat center,
  orange;