배경 이미지 넣기, 배경 이미지 크기 조절하기(background: url)

# 배경 이미지 넣기, 크기 조절하기

## 배경 이미지 넣기

• 배경에 이미지를 넣을 때는 background: url(); 을 사용한다.

사용방법)
background:url(경로);

예시)
background:url("/blog/resource/img/chat.jpg") no-repeat;

 

## 배경 이미지 크기 조절하기

• 배경에 넣은 이미지의 크기를 조절할 땐 px로 크기를 설정해 줄 수 있다.
• 그 외에 설정하는 방법으로는 cover, contain 등이 있다.
• contain : 배경 이미지의 가로, 세로 모두 요소보다 작을 경우, 가능한 크게 조정된다. ( 이미지의 가로, 세로 비율 유지 )
• cover : 배경 이미지의 가로, 세로 길이 모두 요소보다 클 경우, 가능한 작게 조정된다. ( 이미지의 가로, 세로 비율 유지 )

예시)
background-size: cover;

 

## 배경 이미지 반복 여부 설정

• repeat : 가로 방향, 세로 방향으로 반복
• repeat-x : 가로 방향으로 반복
• repeat-y : 세로 방향으로 반복
• no-repeat : 반복하지 않는다.
• initial : 기본값으로 설정
• inherit : 부모 요소의 속성값을 상속받는다.