CSS background 속성

<배경 색과 배경 이미지>

 

background-color 속성 - 배경 색 지정하기

• 16진수( 세밀히 색상 조절)
• rgb값(필요하면 투명도도 함께 조절할 수 있음)
• 색상 이름(원색 사용)

배경 색 스타일은 하위 요소에 상속 되지 않는다.

따라서 각각의 요소에 배경을 따로 지정할 수 있다.

별도로 지정을 안할 경우 전체 배경 색이 보이게 된다.

 

 

background-clip 속성 - 배경 적용 범위 조절하기

각각의 요소마다 배경을 지정하는 방법 말고 박스 모델 관점에서 배경 적용 범위를 조절할 수 있다.

div 선택자의 경우 width랑 padding값 꼭 지정해야한다.

• border-box : 박스 모델의 가장 외곽인 테두리까지 적용
• padding-box : 박스 모델에서 테두리를 뺀 패딩 범위까지 적용
• content-box : 박스 모델에서 내용 부분에만 적용

 

---

 

background-image 속성 - 배경 이미지 넣기

웹에서 사용 가능한 파일인 jpg, gif, png파일을 사용하면 url(파일 경로)형식으로 사용한다. 

배경이미지는 여러 개를 사용할 수 있는데 이런 경우, 순서대로 첫번째 이미지부터 표시한다.

 

 

background-repeat 속성 - 배경 이미지 반복 지정하기

배경이미지의 크기가 채우려는 요소보다 작을 경우, 기본적으로 반복해 표시된다.

• repeat : 브라우저 화면에 가즉 찰 때까지 배경 이미지를 가로와 세로로 반복.
• repeat-x :  브라우저 창 너비와 같아질 때까지 배경 이미지를 가로로 반복
• repeat-y : 브라우저 창 너비와 같아질 때까지 배경 이미지를 세로로 반복
• no-repeat : 배경 이미지를 한 번만 표시.

 

background-size 속성 - 배경 이미지 크기 조절

• auto : 원래 배경 이미지 크기만큼 표시.
• contain : 요소 안에 배경 이미지가 다 들어가도록 이미지를 확대/축소
• cover : 배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소
• 크기 값 : 너비 값과 높이 값을 지정. 너비 값만 지정할 경우, 원래 배경 이미지 크기를 기준으로 확대/축소 비율을 계산해서 자동으로 높이 값 지정.
• 백분율 : 배경 이미지가 들어갈 요소의 크기를 기준으로 백분율 값을 지정하고 그 크기에 맞도록 배경 이미지를 확대/축소

 

background-position 속성 - 배경 이미지 위치 조절하기

수평 위치 값과 수직 위치 값을 함꼐 표시하는데 값을 하나만 지정할 경우, 그 값은 수평 위치 값으로 간주하고 수직 위치 값은 50%나 center로 간주한다.

• 키워드 표시법 :  right, center, left, top, bottom
• 백분율 표시법 :  가로% 세로% (왼쪽을 기준으로 맞춤.)
• 길이(px) 표시법

 

background-origin 속성 - 배경 이미지 배치할 기준 조절하기

• border-box : 박스 모델의 가장 외곽인 테두리가 기준.
• padding-box : 박스 모델에서 테두리를 뺀 패딩이 기준.
• content-box : 박스 모델에서 내용 부분이 기준.

 

background-attachment 속성 - 배경 이미지 고정

• scroll : 화면 스크롤과 함께 배경 이미지도 스크롤된다. 기본 값
• fixed : 화면이 스크롤되더라도 배경 이미지는 고정된다.