[CSS] 배경 관련 속성

 텍스트에 이어서 웹의 배경에 대한 속성들을 몇가지 알아보겠습니다.

---

 웹의 배경이라고 개요를 펼치기는 했지만 실제로는 전체 배경뿐만이 아니라 컨텐츠 하나하나(요소 하나하나 ex] <p>,<a>, <button> 등)의 배경으로 사용할 수 있습니다.

 

background-color: 색상;

 웹의 전체 배경색을 설정합니다.

 

---

 

background-image: url(이미지 파일 경로);

 웹의 배경에 이미지 파일을 삽입할 수 있게 해줍니다.

예시에 사용한 기본 이미지

기본 설정 결과

---

 

위에서 보았듯이 이미지가 계속 반복되어 나오는것이 기본으로 설정되어있습니다.

그래서 이미지 반복 없이 혹은 다른 배열로 배치하고싶다면 다음과 같은 속성을 사용합니다.

 

background-repeat: 속성 값;

background-repeat의 속성 값은 다음과 같습니다.

속성 값	효과
repeat	화면을 가득 채우도록 가로와 세로로 반복 배치 (기본 값)
repeat-x	화면 너비가 가득 찰 때까지 가로로 반복 배치
repeat-y	화면 높이가 가득 찰 때까지 세로로 반복 배치
no-repeat	배경이미지를 한 번만 배치

(좌측) repeat-x (중앙) repeat-y (우측) no-repeat

 

---

 

background-position: 속성 값(수평 위치, 수직 위치);

배경 이미지가 표시되는 위치를 지정하는 속성입니다.

속성 값으로 수평위치가 먼저오고 수직위치가 나오며 각각에 들어갈 수 있는 값은 다음과 같습니다.

 

● 수평 위치 값: left, center, right, 백분율, 길이

● 수직 위치 값: top, center, bottom, 백분율, 길이

 

---

 

background-size: 속성 값;

 이 속성을 이용하면 배경에 사용된 이미지 크기를 자유롭게 설정가능합니다.

다음은 backfround-size의 속성 값들 입니다.

 

속성 값	효과
auto	원본 크기만큼 표시 (기본 값)
contain	요소에 배경이미지가 다 들어가도록 확대/축소
cover	배경 이미지로 요소를 덮도록 확대/축소
크기	너비와 높이를 직접 지정
백분율	배경이 들어가는 요소의 크기를 기준으로 백분율 지정

 

---

 

background-attachment: 속성 값;

배경 이미지를 같이 스크롤 시키거나 고정시키는 속성입니다.

 

속성 값	효과
scroll	문서가 스크롤되면 배경 이미지도 같이 스크롤됩니다. (기본 값)
fixed	문서가 스크롤되어도 배경 이미지는 고정되어 있습니다.