background
- 요소의 배경색 혹은 배경 이미지를 지정하는 단축 속성이다.
background에 포함되는 속성들
backround-color
- 배경색을 지정. 기본값은 값으로 색상 코드 혹은 예약어 사용한다.
background-image보다 뒤에 렌더링 되어 배경 이미지에 투명한 부분이 있다면 배경색 투과한다.
.container {
/* rgb 코드를 사용하여 배경색을 빨간색으로 지정 */
background-color : rgb(255,0,0);
/* hex 코드를 사용하여 배경색 파란색을 지정 */
background-color : #0000ff;
/* 예약어를 사용하여 배경색을 노란색 지정 */
background-color : yellow
}background-image
- 배경 이미지를 지정한다.
- 값으로 url()를 통해 이미지 파일의 경로를 지정한다.
background-color보다 앞에 렌더링 되어 이미지에 투명한 부분이 있다면 배경색이 투과한다.
.container {
/* 경로를 통해 이미지 지정 */
background-image : url("../images/dog01.png");
/* 여러개의 이미지 적용시 먼저 적용한 이미지가 더 위(덮게)에 위치 */
background-image : url("../images/dog01.png"),
url("../images/dog02.png");
}background-repeat
-
배경 이미지의 반복 방법을 지정한다.
-
x축과 y축에 대한 반복 방법, 두개의 값을 지정한다.
값 설명 repeat 이미지를 반복한다. no-repeat 이미지 반복하지 않는다. repeat-x x축에 대해서만 이미지를 반복한다. repeat-y y축에 대해서만 이미지를 반복한다.
.container {
background-image : url("../images/dog02.png");
/* x축과 y축 순으로 지정 */
background-repeat : repeat repeat;
/* y축만 반복 */
background-repeat : no-repeat repeat;
/* repeat 한개만 입력시 x축, y축 모두 반복 */
background-repeat : repeat;
/* no-repeat 하나만 입력시 둘다 반복 X */
background-repeat : no-repeat;
/* repeat-x는 x축만, repeat-y는 y축만 반복 */
background-repeat : repeat-x;
background-repeat : repeat-y;
}background-position
-
배경 이미지의 위치를 지정한다.
-
x축과 y축의 위치, 두개의 값을 지정한다.
값 설명 <키워드> 요소의 x축, y축에 대해서 위치를 키워드로 지정한다. center,top,left등<길이> 요소의 x축, y축의 위치를 길이로 지정한다. px,cm,em등<퍼센트> 요소의 너비, 높이에 대한 퍼센트(%)로 지정한다. <오프셋> 요소의 오프셋 값으로 지정한다. bottom 10px,left 20px등.container { background-image : url("../dog02.png"); /* x축과 y축 모두 가운데로 지정 */ background-position : center center; /* 한개의 축에 대해서만 입력서 나머지 축은 center로 간주 */ background-position : left; /* x축은 좌측, y축은 가운데로 */ background-position : top; /* y축은 상단, x축은 가운데로 */ /* x축, y축의 길이에 대한 n%에 위치 */ background-position : 20% 50%; /* x축, y축 순으로 축을 기준으로 지정한 길이만큼 이동 */ background-position : 50px 100px; /* 배경의 위치에 오프셋 적용 */ background-position : bottom 20px left 30px; }
background-size
-
배경 이미지의 크기를 지정한다.
값 설명 contain 이미지가 잘리거나 찌그러지지 않는 내에서 가장 크게 지정한다. cover 이미지가 찌그러지지 않느 내에서 가장 크게 지정한다. 가로 혹은 세로를 잘라내어 꽉 차게 표현한다. <길이> 요소의 x축, y축의 위치를 길이로 지정한다. px,cm,em등<퍼센트> 요소의 너비, 높이에 대한 퍼센트(%)로 지정한다. .container { background-image : url("../dog02.png"); /* 배경 이미지가 잘리거나 찌그러지지 않는 내에서 가장 크게 설정 */ background-size : contain; /* 배경 이미지가 잘리거나 않는 내에서 가장 크게 설정하여 꽉 차게 설정 */ background-size : cover; /* 배경 이미지의 크기 절대값으로 지정 */ background-size : 20px 50px; /* 배경 이미지의 크기를 x축, y축에 대한 n%로 설정 */ background-size : 20% 50%; }
background-origin
-
배경의 원점(시작 위치)를 설정한다.
값 설정 content-box 배경이 컨텐츠 영역에서 시작한다. padding-box 배경이 안쪽 여백 영역에서 시작한다. border-box 배경이 테두리 영역에서 시작한다. .container { background-image : url("../images/dog01.png"); /* 배경의 원점(시작 위치) 컨텐츠 영역으로 설정 */ background-origin : content-box; /* 배경의 원점(시작 위치) 안쪽 여백 영역으로 설정 */ background-origin : padding-box; /* 배경의 원점(시작 위치) 테두리 영역으로 설정 */ background-origin : border-box; }
background-clip
-
배경색의 지정 범위를 설정한다.
값 설명 content-box 배경색이 컨텐츠 영역까지 적용된다. padding-box 배경색이 안쪽 여백 영역까지 적용된다. border-box 배경색이 테두리 영역까지 적용된다. .container { background-color : red; /* 배경색을 컨텐츠 영역까지 지정 */ background-clip : content-box; /* 배경색을 안쪽 여백 영역까지 지정 */ background-clip : padding-box; /* 배경색을 테두리 영역까지 지정 */ background-clip : border-box; }
background-attachment
-
배경을 고정하는 방식을 설정한다.
값 설명 sroll 배경을 요소에 고정한다. 스크롤시 배경은 스크롤되지 않는다. local 배경을 요소에 고정한다. 스크롤시 배경이 컨텐츠와 함께 스크롤된다. fixed 배경을 뷰포트에 고정한다. 스크롤시 배경은 스크롤 되지 않는다. .container { background-color : red; /* 배경을 요소에 고정. 요소 스크롤 시 배경 스크롤 X */ background-attachment : scroll; /* 배경을 요소에 고정. 요소 스크롤 시 배경이 함께 스크롤 X */ background-attachment : local; /* 배경을 뷰포트에 고정. 요소 스크롤 시 배경 스크롤 X */ background-attachment : fixed; }
