[CSS] 맨날 검색하는 background 한번에 쓰기

background는 하위 속성이 많다.

각각 사용이 가능하지만 쓰다보면 한 가지만 사용하는 경우는 잘 없었다.

코드가 중복으로 너무 길어지는 것 같아서 한번에 적으려 하면 항상 찾아보게 되는데 그냥 블로그에 정리하고 이것만 보자 하는 생각에 정리하게 되었다.

 

1. 하위 속성의 종류

background-attachment

: 배경 이미지를 뷰포트 내에서 고정할지, 아니면 자신의 컨테이닝 블록과 함께 스크롤할지 지정합니다.

background-clip

: 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할 지 지정합니다.

background-color

: 요소의 배경 색을 지정합니다.

background-image

: 요소의 배경 이미지를 한 개나 여러 개 지정합니다.

background-origin

: 배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 지정합니다.

background-position (en-US)

: 각 배경 이미지의 초기 위치를 설정합니다. 위치는 background-origin에서 설정한 위치 레이어를 기준으로 합니다.

background-repeat

: 배경 이미지의 반복 방법을 지정합니다. 가로축 및 세로축을 따라 반복할 수 있고, 아예 반복하지 않을 수도 있습니다.

background-size

: 요소 배경 이미지의 크기를 설정합니다. 그대로 두거나, 늘리고 줄이거나, 공간에 맞출 수 있습니다.

 

2. mdn에 나오는 예시들

/* <background-color> 사용 */
background: green;

/* <bg-image>와 <repeat-style> 사용 */
background: url("test.jpg") repeat-y;

/* <box>와 <background-color> 사용 */
background: border-box red;

/* 단일 이미지, 중앙 배치 및 크기 조절 */
background: no-repeat center/80% url("../img/image.png");

/* 2개 이미지, 중앙 배치 및 크기 조절 */
background: center / contain no-repeat url("../../media/examples/firefox-logo.svg"),
			#eee 35% url("../../media/examples/lizard.png");