축약형으로 쓸 수 있는 속성
- 축약형: 순서대로 속성마다 띄어쓰기로 구분하여 작성, 부여하지 않는 속성은 생략
(
background: color -> image -> repeat -> position -> attachment)
background-color: 요소의 배경색background-image: 이미지를 배경으로 사용할 때background-repeat: 배경이미지의 반복 여부와 방향 지정background-position: 배경의 위치를 지정background-attatchment: 배경이미지를 화면에 고정하거나 움직이게fixed,local,scroll(초기값)
축약형으로 쓸 수 없는 속성
background-size: 배경이미지의 크기를 설정background-origin: 배경이미지를 어느 영역부터 채워나갈지 정하는 속성border-box: 배경을 테두리 박스에 상대적으로 배치padding-box: 초기값. 배경을 안쪽 여백 박스에 상대적으로 배치content-box: 배경을 콘텐츠 박스에 상대적으로 배치
background-clip: 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할지 지정border-box: 초기값. 배경이 테두리의 바깥 경계까지 차지(z축 순서 상 테두리 아래 위치)padding-box: 배경이 안쪽 여백의 바깥 경계까지 차지content-box: 배경을 콘텐츠 상자에 맞춰text: 배경을 전경 텍스트 위에만
background-blend-mode