CSS 작성시 엄청 자주 쓰이는데 은근 매번 헷갈려서 찾아보게 되는 background property.
내가 쓸 때 편하려고, 정리하고 간다!
background-color: transparent | color | initial | inherit
배경의 색. border와 padding을 포함한 영역을 칠함. margin 영역은 칠하지 않음.
기본값 : transparent / 상속 : No / 애니메이션 : Yes
- transparent : 배경색 없음
- color : 색을 정함
- initial : 기본값으로 설정
- inherit : 부모 요소의 속성값을 상속받음
background-image: none | url | initial | inherit
이미지를 배경으로 사용하게 함.
기본값 : none / 상속 : No / 애니메이션 : No
- none : 이미지를 배경으로 사용하지 않음
- url : 이미지의 URL을 입력
- initial : 기본값으로 설정함
- inherit : 부모 요소의 속성값을 상속받음
background-position: x-position y-position | initial | inherit
배경 이미지의 위치를 정함.
기본값 : 0% 0% / 상속 : No / 애니메이션 : Yes
- x-position y-position : 가로 위치와 세로 위치를 정함
가로 위치 값 : left, center, right, 백분율, 길이
세로 위치 값 : top, center, bottom, 백분율, 길이
- initial : 기본값으로 설정
- inherit : 부모 요소의 속성값을 상속받음
background-size: auto | length | cover | contain | initial | inherit
배경 이미지의 가로 크기와 세로 크기를 정할 수 있음.
기본값 : auto / 상속 : No / 애니메이션 : Yes
- auto : 이미지 크기를 유지함
- length : 값을 두 개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기. 값을 한 개 넣으면 가로 크기이며, 세로 크기는 원본 이미지의 가로 세로 비율에 맞게 자동으로 정해짐. 백분율을 사용할 수도 있음. (백분율로 크기를 정할 때의 기준은 이미지 크기가 아니라 배경을 사용하는 요소의 크기임)
- cover : 배경을 사용하는 요소를 다 채울 수 있게 이미지를 확대 또는 축소. 가로 세로 비율은 유지.
- contain : 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소. 가로 세로 비율을 유지.
- initial : 기본값으로 설정
- inherit : 부모 요소의 속성값을 상속받음
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
배경 이미지의 반복 여부와 반복 방향을 정함.
기본값 : repeat / 상속 : No / 애니메이션 : No
- repeat : 가로 방향, 세로 방향으로 반복
- repeat-x : 가로 방향으로 반복
- repeat-y : 세로 방향으로 반복
- no-repeat : 반복하지 않음
- initial : 기본값으로 설정
- inherit : 부모 요소의 속성값을 상속받음
background-origin: border-box | padding-box | content-box | initial | inherit
HTML 요소는 박스로 이루어져 있고, Margin영역, Border영역, Padding영역, Content영역으로 구분함. 배경 이미지를 어느 영역부터 채워나갈지를 정함.
기본값 : padding-box / 상속 : No / 애니메이션 : No
- border-box : 테두리 영역 왼쪽 위부터 채움
- padding-box : 안쪽 여백 영역 왼쪽 위부터 채움
- content-box : 내용 영역 왼쪽 위부터 채움
- initial : 기본값으로 설정
- inherit : 부모 요소의 속성값을 상속받음
background-clip: border-box | padding-box | content-box | initial | inherit
HTML 요소는 박스(box)로 이루어짐. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성.
기본값 : border-box / 상속 : No / 애니메이션 : No
- border-box : 테두리 영역과 그 안쪽 영역을 채움
- padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채움
- content-box : 내용 영역과 그 안쪽 영역을 채움
- initial : 기본값으로 설정함
- inherit : 부모 요소의 속성값을 상속받음
background-attachment로 배경 이미지의 스크롤 여부를 정함.
기본값 : scroll / 상속 : No / 애니메이션 : No
- scroll : 선택한 요소와 같이 움직임. 내용을 스크롤하면 배경 이미지는 스크롤되지 않음.
- fixed : 움직이지 않음.
- local : 선택한 요소와 같이 움직임. 내용을 스크롤하면 배경 이미지도 스크롤됨.
- initial : 기본값으로 설정
- inherit : 부모 요소의 속성값을 상속받음
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
위와 같이 background: 속성으로 지정하고 한번에 쭉 써도 OK.