css background-

background: 요소의 배경과 관련된 내용을 설정한다.

background-color: 요소의 배경 색상을 설정한다.
기본값 :transparent(투명색)
ex)

<style>
.box1{
  width: 100px;
  height: 100px;
  background:red;
}
</style>
<div class="box1"></div>

이때 color의 값으로 핵사 코드#000000, rgb(), rgba() 등등도 들어갈 수 있다.

background-image : 요소의 배경에 하나 이상(여러개 image)의 이미지를 삽입할 수 있다. 이때 하나의 요소의 url를 여러 개 작성하여 여러 장의 이미지를 삽입할 수 있다.
이때 background-image는 요소하나의 여러 가지 이미지를 넣을 때 url과 url사이 , 로구분한다. 

기본값 : none

속성값
none : 이미지 없음
url("이미지 경로")

ex)

<style>
.box1{
 background-image:
url("./icon2.png"),
url("./icon1.png"),
url("./icon3.png");
 width: 100px;
 height: 100px;
 background-size: cover;
}

</style>
<div class="box1"></div>

주의사항 : 하나의 요소의 여러 장의 이미지를 삽입하면 제일 처음 작성된 url이 더 위에 쌓이고 이러한 방식은 ie8버전 이하에서는 사용할 수 없기 때문에
크로스 브라우징 즉 웹 호환성을 고려하지 않는 행위이다. 때문에 url을 여러개 작성하여 하나의 요소의 여러 장에 이미지를 추가하는 행위는 되도록 하지 말자!
또한 background-image를 사용하면 기본적으로 이미지가 반복되어 출력하기때문에 background-repeat을 이용하여 반복하지 않게 해 줄 수 있는 점을 참고하자

background-repeat: 배경 이미지에 반복여부를 설정한다.
기본값: repeat

background-repeat의 속성 값 :
repeat: 배경이미지를 수평(가로) , 수직(세로)으로 반복한다 
repeat-x: 배경이미지를 수평(가로)으로 반복한다.
repeat-y: 배경이미지를 수직(세로)으로 반복한다.
no-repeat: 배경이미지를 반복하지 않는다.

ex)

 <style>
    .box1 {
      background-image: url("./icon2.png");
      width: 500px;
      height: 500px;
      background-repeat: repeat-x;
      border: 1px solid;
    }

    .box2 {
      background-image: url("./icon2.png");
      width: 500px;
      height: 500px;
      background-repeat: repeat-y;
      border: 1px solid red;
      margin-bottom: 40px;
    }

    .box3 {
      background-image: url("./icon2.png");
      width: 500px;
      height: 500px;
      background-repeat: no-repeat;
      border: 1px solid blue;
    }
  </style>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
  <div class="box3">box3</div>

background-position: 요소에 background-image로 만들어진 배경 이미지를  요소 안에 어디에 위치시킬지 설정한다.

사용법 :background-position: x축, y축
기본값: w:0 h:0
background-position의 속성값:
단위: px em % 등등
방향 left,right,center(x축) top, bottom(y축)
ex)

<style>
  .box1{
    background-image: url("./icon1.png"); -->요소에 배경이미지 설정
    background-size: 100px; --> 배경이미지에 크기 
    background-repeat: no-repeat; --> 배경이미지를 반복하지않게 하는 코드
    width: 500px; -->class가 box1인 div요소에 가로너비
    height: 500px; -->class가 box1인 div요소에 세로너비
    border: 1px solid red;  --> class가box1인 div태그의 영역을 표시하기위한 코드
    background-position: right top ; --> class가 box1인 div태그의 영역안에서 right(x축) top(y축)을 설정하여 div태그안에서 이미지를 이동시킨 코드
  }  
  </style>
  <div class="box1">box1</div>

background-attachment: 요소가 스크롤될때 배경 이미지의 스크롤 여부를 설정
기본값 : scroll

background-attachment의 속성값
scroll: 요소가 스크롤 될때 배경 이미지도 같이 스크롤됨
fixed:  요소가 스크롤 되도 배경 이미지는 해당 위치에 고정됨

ex)

<style>
  .box1{
    background-image: url("./icon1.png"); -->요소에 배경이미지 설정
    background-size: 200px; -->배경이미지의 크기설정
    background-repeat: no-repeat; -->배경 이미지의 반복여부 설정
    background-attachment: fixed; -->요소가 scroll됬을때 배경이미지는 화면에 고정된것을 보여주는 태그
    width: 500px; -->요소의 가로너비
    height: 500px; --> 요소의 세로너비
    border: 1px solid red;  div태그의 영석을 보여주기위한 태그 
    margin-bottom: 1000px;  --> 스크롤을 하기위한 태그
  }
  .box2{
    background-image:url("./icon2.png") ;
    background-size: 200px;
    background-repeat: no-repeat;
    background-attachment: scroll;
    width: 500px;
    height: 500px;
    border: 1px solid blue;
  }
    
  </style>
  <div class="box1">box1</div>
  <div class="box2">box2</div>

background-size : 배경 이미지의 크기를 지정
기본값 : auoto

background-size의 속성값
auto: 본래 이미지가 가지고있던 크기가 출력됨 때문에 이미지가 요소보다 커서 안 나오거나 잘릴 수도 있음
단위: px, em, % 를사용하여 이미지의 크기를 설정한다  
cover: 이미지의 비율을 유지하며 요소에 width와 height 중 더 넓은 너비에 이미지가 맞춰짐 (이미지가 잘릴 수 있다)
contain: 이미지의 비율을 유지하며 요소에 width와 height중 더 짧은 너비에 이미지가 맞춰짐(이미지가 잘리지 않는다.)