[CSS] 배경 이미지 지정

backgrounnd-image : 웹 요소에 배경 이미지 넣기

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

 

이미지 파일은 *.jpg, *.gif, *.png 형식을 사용하며 파일 경로에는 작은따옴표(' ')나 큰따옴표(" ")를 붙인다. 파일 경로에는 현재 웹 문서를 기준으로 상대 경로를 지정할 수도 있고, http://로 시작하는 절대 경로를 사용할 수도 있다.

 

※ 배경을 넣을 때 요소보다 이미지 크기가 작으면 이미지가 가로와 세로로 반복되면서 요소의 배경을 가득 채운다.

 

 

background-repeat : 배경 이미지의 반복 방법 지정

background-reaeat 속성을 사용하면 배경 이미지를 가로와 세로 중에서 어떤 방향으로 반복할지 지정하거나, 반복하지 않고 한 번만 나타나게 할 수 있다.

• repeat : 브라우저 화면에 가득 찰 때까지 가로와 세로로 반복 (기본값)
• repeat-x : 브라우저 화면 너비에 가득 찰 때까지 가로로 반복
• repeat-y : 브라우저 화면 높이에 가득 찰 때까지 세로로 반복
• no-repeat : 한 번만 표시하고 반복하지 않음

 

 

background-position : 배경 이미지의 위치 조절

background-position: <수평 위치> <수직 위치>;

수평 위치: left | center | right | <백분율> | <길이 값>

수직 위치: top | center | bottom | <백분율> | <길이 값>

 

background-position 속성을 이용하면 배경 이미지의 수평 위치 또는 수직 위치의 값을 지정 할 수 있다.

속성값을 2개로 지정한다면 첫 번째 값은 수평 위치의 값이 되고 두 번째 값은 수직 위치의 값이 된다.

속성값을 1개만 지정한다면 웹 브라우저에서는 지정한 값을 수평 위칫값으로 간주하고, 수직 위칫값은 50%나 center로 간주한다.

 

• 키워드 : 
  배경 이미지의 위치를 지정할 때 가장 많이 사용하는 속성
  수평 위치는 left, center, right 중에서 선택할 수 있고 수직 위치는 top, center, bottom 중에서 선택할 수 있다.
  ※ 배경 이미지의 수직, 수평 위치를 모두 가운데로 지정한다면 background-position: center center; 이 아닌 background-position: center; 라고 줄여 쓸 수 있다.
  
  
• 백분율(%) :
  위치 속성값을 백분율로 표시한다는 것은 요소가 있는 해당 위치에 배경 이미지의 위치를 백분율로 계산하여 맞춘다는 뜻이다.
  예를들어 background-position: 30% 60%; 라면 배경 이미지를 넣을 요소의 왼쪽 모서리로부터 가로 30%, 세로 60% 의 위치에 비경 이미지의 가로 세로가 각각 30%, 60%인 위치를 맞춘다.
  
  
•  크기 : 
  배경 이미지의 위치를 길이로 직접 지정한다.
  예를들어 background-position: 30px 60px; 이라고 지정하면 가로 30픽셀, 세로 60픽셀의 위치에 배경 이미지의 왼쪽 상단 모서리를 맞춘다.

 

 

background-origin : 배경 이미지의 적용 범위 조절

background-origin 속성을 이용하여 배경 이미지를 패딩이나 테두리까지 포함해서 표시할 수 있다.

• content-box : 박스 모델에서 내용(콘텐츠) 부분에만 배경 이미지를 표시 (기본값)
• padding-box : 박스 모델에서 패딩까지 배경 이미지 표시
• border-box : 박스 모델에서 테두리까지 배경 이미지를 표시

 

 

background-attachment : 배경 이미지 고정

배경 이미지가 있는 웹 문서를 웹 브라우저에서 열고 스크롤 막대를 위아래로 조절하면 문서 전체가 움직이므로 배경 이미지도 함께 이동한다. 이때 background-attachment ​속성을 사용하면 배경 이미지를 고정할 수 있다.

• scroll : 화면을 스크롤하면 배경 이미지도 스크롤된다. (기본값)
• fixed : 화면을 스크롤하면 배경 이미지는 고정되고 내용만 스크롤된다.

 

 

background : 하나의 속성으로 배경 스타일 한번에 지정

위에서 설명한 배경 이미지 관련 속성은 background라는 하나의 속성으로 줄여 사용할 수 있다.

 

 

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

배경을 채울 요소 크기에 비해 이미지가 너무 작거나 클 경우 background-size 속성을 사용하여 배경 이미지의 크기를 조절할 수 있다. 특히 화면에 배경 이미지를 가득 채워야 할 경우에 유용하게 사용된다.

속성값이 하나라면 그 값은 너비로 인식하고 높이는 원래 이미지의 너비와 높이 비율에 따라 자동으로 계산한다.

• auto : 원래 배경 이미지 크기만큼 표시 (기본값)
• contain : 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대 혹은 축소
• cover : 배경 이미지로 요소를 모두 덮도록 이미지를 확대 혹은 축소
• <크기> : 이미지의 너비와 높이를 지정한다. 값이 하나만 주어질 경우 너빗값으로 인식하며, 원래 이미지의 너비와 높이 비율에 따라 높잇값도 자동으로 계산한다.
• <백분율> : 배경 이미지가 들어갈 요소의 크기를 기준으로 값을 백분율로 지정하고 그 크기에 맞도록 배경 이미지를 확대 혹은 축소한다.