09-2 배경 이미지 지정하기

배경 이미지는 웹 요소에 이미지를 넣거나 목록의 불릿 이미지를 대신하여 아이콘과 같은 이미지를 넣을 때도 사용함.

그만큼 배경 이미지는 관련된 속성이 많다는 것이므로 잘 기억해 두셈.

 

>>>웹 요소에 배경 이미지를 넣는 background-image 속성

[기본형] background-image: url('이미지 파일 경로')

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

 

>>> 배경 이미지의 반복 방법을 지정하는 background-repeat 속성

배경 이미지를 가로와 세로 중에서 어떤 방향으로 반복할지 지정하거나, 반복하지 않고 한 번만 나타나게 할 수도 있음.

 

>>> 배경 이미지의 위치를 조절하는 background-position 속성

배경 이미지의 수평 위치 또는 수직 위치의 값을 지정

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

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

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

 

>>> 배경 이미지의 적용 범위를 조절하는 background-origin 속성

박스 모델에 패딩이나 테두리가 있다면 배경 이미지를 패딩까지 표시하거나 테두리까지 포함해서 표시할 수도 있음.

 

>>> 배경 이미지를 고정하는 background-attachment 속성

배경 이미지가 있는 웹문서를 웹 브라우저에서 열고 스크롤 막대를 위아래롤 조절하면 문서전체가 움직이므로

배경 이미지도 함께 이동함.

 

>>>background 속성 하나로 배경 이미지 제어하기

배경 이미지 관련 속성을 background라는 하나의 속성으로 줄여 사용할 수 있음.

예시)

body {

   background-image: url('images/bg4.png');

   background-repeat: no-repeat;

   background-position: center bottom;

   background-attachment: fixed;

}

위의 코드를 하나로 묶으면? 

background: url('images/bg4.png') no-repeat center bottm fixed;

 

>>> 배경 이미지 크기를 조절하는 background-size 속성

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

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