CSS 요소의 배경 설정(background)

한 줄 정리

# background-color : 배경의 색을 정의

# background-image : 배경의 이미지를 정의

# background-position : 배경의 초기 위치를 정의

# background-size : 배경의 이미지 크기를 정의

# background-repeat : 배경 이미지의 반복을 정의

 

 

 

---

 

 

 

 

##CSS 요소의 배경 설정(background)

 

-요소의 배경화면을 정의한다.
-배경의 색상, 이미지, 반복등의 다양한 하위속성을 정의할 수 있다.
-필수요소는 아니므로 필요한 경우에만 사용하면된다.

 

# background-color : 배경의 색을 정의

# background-image : 배경의 이미지를 정의

-url()은 함수인데, 함수란 자주 이용하는 코드를 만들어 놓고 호출해서 사용하는 것이다.

background-image: url(/image/kakao.png);

# background-position : 배경의 초기 위치를 정의

    background-position: center;
    background-position: right;
    background-position: left;
    background-position: top;
    background-position: right top;

# background-size : 배경의 이미지 크기를 정의

background-size: 200px;
background-size: cover; 	// 이미지가 깨지지 않는 선에서 꽉 채워준다.
background-size: contain; 	// 원본 비율을 유지한채로 채우겠다.

cover

contain

 

# background-repeat : 배경 이미지의 반복을 정의

background-repeat: repeat; 	// 반복해서 사용하겠다.
background-repeat: no-repeat;	// 반복해서 사용하지 않겠다.