CSS (4)

배경 삽입

배경  : 이미지, 색 등을 삽입할 수 있다.

 

 - 배경의 크기는 background-size를 사용하며, auto, contain, cover, 가로값 세로값,  %를 입력하여 조절한다.

   auto: 기본값으로 원래 이미지의 사이즈로 삽입된다.

   contain: 요소 안에 배경 이미지가 들어오도록 이미지를 확대한다.

   cover:  이미지가 요소를 모두 덮도록 너비, 높이 모두 확대 또는 축소해서 이미지를 맞춘다.

   가로값 세로값: 값을 입력하여 이미지의 크기를 조절한다.

   %: 백분율은 요소의 사이즈에 맞게 이미지의 크기를 구해 이미지를 확대하거나 축소한다.

 - 배경 이미지는 background-image를 사용하여 웹페이지에 이미지를 삽입할 수 있다.

 - 위의 이미지에서 2번째 줄을 보면 배경 색이 입력되어 있는데, rgba 값을 이용하여 투명도를 주어 배경 이미지도

   확인할 수 있다.

 - 이미지가 반복될 때 background-repeat: no-repeat;을 사용하여 반복되지 않게 할 수 있다.

 - 만약, opacity를 사용하면 배경뿐만 아니라 글자에도 영향을 미치게 된다.