배경 이미지

배경 이미지 넣는 방법

 

background-image: url("이미지 주소");를 사용해주면 됩니다.

 

하지만 위 코드만 사용하게 되면 이미지가 반복될 뿐만 아니라, 화면에 알맞게 적용이 되지 않습니다. 이것을 해결하기 위해 몇 가지 속성 코드들이 있습니다.

 

 

background-repeat

background-repeat는 이미지를 반복시킬 것인지 아닐 것인지, 그리고 반복시킨다면 어떤 방식으로 반복시킬 것인지 정해주는 속성입니다.

background-repeat: no-repeat;  : 반복하지 않음

background-repeat: repeat-x;  : 가로 방향으로만 반복

background-repeat: repeat-y;  : 세로 방향으로만 반복

background-repeat: repeat;  : 가로 세로 모두 반복

background-repeat: space;  : 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분

background-repeat: round;  :  반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 확대를 통해 배분

 

 

 

 

background-size

background-size는 배경 이미지의 사이즈를 정해주는 속성입니다.

 

background-size: auto;  : 원래 이미지 사이즈대로 출력

background-size: cover;  : 화면을 꽉 채우면서, 사진 비율을 유지

background-size: contain;  : 가로, 세로 중 먼저 채워지는 쪽에 맞추어서 출력

background-size: 30px 50 px;  : 픽셀값 지정 (가로: 30px, 세로:  50px로 설정)

background-size: 60p% 70%;  : 퍼센트값 지정(가로: 부모 요소 width의 60%, 세로: 부모 요소의 height의 70%로 설정)

 

background-position

background-position은 배경 이미지의 위치를 정해주는 속성입니다.