Background 속성 - by. UXKM

Publishing
CSS
CSS 초급
Background 속성

요약 설명
CSS의 background 속성은 요소의 배경을 제어하는 속성들로 구성됩니다.
배경색(background-color), 배경 이미지(background-image), 배경 이미지의 반복(background-repeat), 위치(background-position), 크기(background-size), 기준 영역(background-origin), 클리핑 영역(background-clip), 고정 여부(background-attachment) 등을 개별적으로 설정하거나, background 축약형 속성을 사용하여 한 번에 설정할 수 있습니다.

background 각 속성의 기본 값

background 속성의 기본값은 다음과 같습니다.

							p {
								background-color: transparent;
								background-image: none;
								background-repeat: repeat;
								background-position: 0% 0%;
								background-size: auto auto;
								background-origin: padding-box;
								background-clip: border-box;
								background-attachment: scroll;
							}

background-color 속성

배경의 색을 지정합니다.
지정한 색으로 border와 padding을 포함한 영역을 칠합니다.
margin 영역은 칠하지 않습니다.

							p {
								background-color: color | transparent | inherit;
							}

transparent : 기본값으로 배경색이 없습니다(투명).
color : 색을 정합니다.

background-image 속성

이미지를 배경으로 사용하게 하는 속성입니다.

							p {
								background-image: none | url('경로') | inherit;
							}

none : 기본값으로 이미지를 배경으로 사용하지 않습니다.
url : 이미지의 URL을 입력합니다.

background-repeat 속성

배경 이미지의 반복 방식을 지정하는 속성입니다.
기본값은 repeat로, 이미지가 가로와 세로로 반복됩니다.
repeat-x는 가로 방향으로만, repeat-y는 세로 방향으로만 반복합니다.
no-repeat를 설정하면 반복하지 않습니다.

							<style>
								p {
									background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit;
								}
							</style>

repeat : 기본값으로 가로 방향, 세로 방향으로 반복합니다. 값이 없어도 기본이 repeat 됨.
repeat-x : 가로 방향으로 반복합니다.
repeat-y : 세로 방향으로 반복합니다.
no-repeat : 반복하지 않습니다.

background-position 속성

배경 이미지의 위치를 정하는 속성입니다.
가로 위치/세로 위치를 축약형 방식으로 사용할 수 있습니다.
background-position의 기준은 항상 좌측 상단부터 시작합니다.
background-position의 기본값은 좌측 상단 기준 background-position: 0% 0%입니다.

							p {
								background-position: [[percentage | length | left | center | right] [percentage | length | top | center | bottom ]] | [[left | center | right] || [top | center | bottom]] | inherit;
							}

position-x position-y : 가로 위치(left, center, right, 백분율, 길이)와 세로 위치(top, center, bottom, 백분율, 길이)를 정합니다.
가로 위치 / 세로 위치 키워드의 조합은 다음과 같이 사용할 수 있습니다.
div { background-position: left top; // left top = 0 0 background-position: left center; // left center = 0 50% background-position: left bottom; // left bottom = 0 100% background-position: right top; // right top = 100% 0 background-position: right center; // right center = 100% 50% background-position: right bottom; // right bottom = 100% 100% background-position: center top; // center top = 50% 0 background-position: center center; // center center = 50% 50% background-position: center bottom; // center bottom = 50% 100% }

background-attachment 속성

배경 이미지의 스크롤 여부를 정합니다.

							p {
								background-attachment: scroll | fixed | local | inherit;
							}

scroll : 기본값으로 배경은 요소 자체에 상대적으로 고정되며 내용과 함께 스크롤되지 않습니다.
fixed : 배경은 뷰포트를 기준으로 고정됩니다. 요소에 스크롤이 있어도 배경은 요소와 함께 움직이지 않습니다.
local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다.

background-size 속성

배경 이미지의 가로 크기와 세로 크기를 정할 수 있습니다.
백분율로 크기를 정할 때의 기준은 이미지 크기가 아니라 배경을 사용하는 요소의 크기입니다.
배경 이미지의 사이즈를 지정합니다.
배경 이미지의 고유 비율을 유지하기 때문에 설정에 따라 이미지의 일부가 보이지 않을 수 있습니다.
배경 이미지의 width, height를 모두 설정할 수 있습니다.
이때 첫 번째 값은 width, 두 번째 값은 height를 의미합니다.
하나의 값만을 지정한 경우, 지정한 값은 width를 의미하게 되며 height는 auto로 지정됩니다.

							p {
								background-size: auto | length | cover | contain | initial | inherit;
							}

auto : 기본값으로 이미지 크기를 유지합니다.
length : 값을 두 개 넣으면 첫 번째 값이 가로 크기, 두 번째 값이 세로 크기입니다.
값을 한 개 넣으면 가로 크기이며, 세로 크기는 원본 이미지의 가로 세로 비율에 맞게 자동으로 정해집니다.
px값 지정
배경 이미지 크기가 지정된 px값 그대로 설정됩니다. 첫 번째 값은 width, 두 번째 값은 height를 의미합니다.

%값 지정
배경 이미지 크기가 지정된 %값에 비례하여 설정됩니다. 첫 번째 값은 width, 두 번째 값은 height를 의미합니다.

화면을 줄이거나 늘리면 배경 이미지의 크기도 따라서 변경되어 찌그러지는 현상이 발생합니다.
cover : 배경 이미지의 크기 비율을 유지한 상태에서 부모 요소의 width, height 중 큰 값에 배경 이미지를 맞춥니다. 따라서 이미지의 일부가 보이지 않을 수 있습니다.
contain : 배경 이미지의 크기 비율을 유지한 상태에서 부모 요소의 영역에 배경 이미지가 보이지 않는 부분 없이 전체가 들어갈 수 있도록 이미지 스케일을 조정합니다.

background-origin 속성

HTML 요소는 박스로 이루어져 있고, 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area), 내용 영역(Content Area)으로 구분합니다.
background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다.
background-origin 속성을 사용할 때 background-attachment: fixed 값은 무시됩니다.

							p {
								background-origin: border-box | padding-box | content-box | initial | inherit;
							}

padding-box : 기본값으로 안쪽 여백 영역 왼쪽 위부터 채웁니다.
border-box : 테두리 영역 왼쪽 위부터 채웁니다.
content-box : 내용 영역 왼쪽 위부터 채웁니다.

background-clip 속성

배경 이미지나 배경색을 그 박스 중 어디에 넣을 지정하는 속성이 background-clip입니다.

							p {
								background-clip: border-box | padding-box | content-box | inherit;
							}

border-box : 기본값으로 테두리 영역과 그 안쪽 영역을 채웁니다.
padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다.
content-box : 내용 영역과 그 안쪽 영역을 채웁니다.

background Shorthand 속성

색상, 이미지, 크기, 반복 등 한 번에 모든 배경 스타일 속성을 축약형 방식으로 설정합니다.
축약형 방식으로 사용하여 설정할 경우 콤마(,)로 구분하여 여러 형식의 배경을 정의할 수 있습니다.

							p {
								background: #ffffff url("image.png") no-repeat right top fixed;
							}