background

background

태그의 배경을 지정하는 속성이다.

 

• background-color : 배경 색을 지정해준다.
• background-image : 배경 이미지를 지정해준다.
• background-repeat : 배경 이미지의 반복 여부를 정해준다.
  • no-repeat : 반복하지 X
  • repeat-x : x축으로 반복
  • repeat-y : y축으로 반복
  • repeat : 반복해줌
• background-position : 배경 이미지의 위치를 정해준다. 
  • 왼쪽부터 이미지가 출력되는게 기본값이다.
  • left, top, center, bottom, right를 이용해 위치를 정해줄 수 있고, 픽셀, 상수를 이용해서 위치 지정이 가능하다.
• background-size : 배경 이미지를 여러 크기로 조절할 수 있다.
  • auto : 원래 배경 이미지 크기만큼 표시된다. (기본값)
  • contain : 지정한 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대 및 축소한다.
  • cover : 지정한 요소를 다 덮도록 배경이미지를 확대 및 축소한다.
  • 백분율 : 지정한 요소를 기준으로 백분율 값을 지정한다. 요소 사이즈에 맞게 이미지 크기를 구해서 확대 및 축소를한다.

 

아래 예시는 사진 반복을 하지않아 공간 여백이 생겼고, 사진의 위치를 center로 지정해주었다.

 

 

background-size: cover를 해주면 남은 공간 여백을 차지하면서 사진이 늘어나게 된다!

창을 줄이면 그에 맞게 사진이 늘인다.

페이지의 크기에 따라 사진이 동적으로 변함! 

 

 

이 속성들을 한번에 축약해서 쓸 수 있다.

 

이때 position 과 size는  꼭! / 를 붙여 사용해야한다.