CSS 배경 색, 배경 이미지

background-color 속성

background-color : <색상>

• 웹 문서의 요소에 배경색 지정
• 16 진수나 rgb값, rgba 값 또는  색상 이름 사용
• 배경 색은 상속 되지 않습니다.

background-color : #00ff00; // 16진수 : 세밀히 생상 조절
background-color : rgb(0,255,0); // rgba : 필요하면 투명도도 함께 조절 가능
background-color : green; // 색상 이름 : 원색사용

 

코드를 이렇게 짯을때

이런 디자인이 나오게 됩니다.

background-clip속성

배경을 어디까지 적용할지 지정

background-clip : border-box | padding-box | content-box

속성 값	설명
border-box	박스 모델의 가장 외곽인 테두리(border)까지 적용합니다.
padding-box	박스 모델에서 테두리를 뺀 패딩(padding) 범위까지 적용됩니다.
content-box	박스 모델에서 내용 부분에만 적용합니다.

 

background-image 속성

 

배경 이미지 파일 경로 지정

background-image : url(파일 경로/파일이름)

background-size 속성

background-size : auto | contain | cover | <크기 값> | <백분율>

속성 값	설명
auto	원래 배경 이미지 크기만큼 표시됩니다.
contain	요소 안에 배경 이미지가 다 들어오도록 확대/축소
cover	배경 이미지로 요소를 모두 덮도록 확대/축소
<크기 값>	너비 값과 높이 값을 지정합니다. 너비 값만 지정할 경우, 원래 배경 이미지 크기를 기준으로 축소/ 확대 비율을 자동으로 계산해 높이 값을 지정합니다.
<백분율>	원래 배경 이미지 크기를 기준으로 확대하거나 축소합니다.

 

background-position 속성

 

배경 이미지를 반복하지 않을 경우, 배경 이미지를 표시할 위치 지정

background-position : <수평 위치><수직 위치>;
수평 위치 : left | center | right | <백분율> | <길이 값>
수직 위치 : top | center | bottom | <백분율> | <길이 값>

1. 백분율 : 배경 이미지의 가로 위치와 세로 위치를 %로 나타냄

background-postion : 0%, 0%, background-postion : 30%, 60%

2. 길이 길이 : 배경 이미지의 위치를 직접 길이로 지정

background-postion : 30px 20px;

3. 키워드 : top, left, center, right, top, middle, bottom

background-postion : center bottom

background-origin 속성

배경 이미지를 배치하기 위한 기준 설정

background-origin : border-box | padding-box | content-box

속성 값	설명
border-box	박스 모델의 가장 외곽인 테두리(border)가 기준이 됩니다.
padding-box	박스 모델에서 테두리를 뺀 패딩(padding)이 기준이 됩니다.
centent-box	박스 모델에서 내용 부분이 기준이 됩니다.

 

background-attachment속성 

background-attachment : scroll | fixed

속성	설명
scroll	화면이 스크롤과 함께 배경 이미지도 스크롤 됩니다. 기본 값입니다.
fixed	화면이 스크롤 되더라도 배경 이미지는 고정됩니다.

body {

	background-image : url('images/bottom-bg.jpg');
	background-repeat : no-repeat;
	background-position : right bottom;
	background-attachment : fixed;
}