CSS background-image, 웹페이지에 배경화면 이미지를 넣어보자

BACKGROUND-IMAGE란?

background-image를 이용하면 HTML 요소에 배경 이미지를 정할 수 있습니다. background-color는 특정한 색을 사용하는 반면, background-image는 이미지 파일을 적용할 수 있습니다.

 

기본적인 사용법

.element {
  background-image: url("image.jpg");
}

• CSS 선택자 안에 background-image 속성을 입력합니다
• 속성값은 url(이미지가 있는 주소)를 입력합니다

 

예시

아래는 저작권없는 이미지 하나를 선택해서 배경 이미지로 설정해본 거에요

See the Pen bg-image by 40's Programmer (@40sProgrammer) on CodePen.

 

함께 사용되는 속성들

background-image 속성과 함께 사용하는 속성이 있습니다.

background-size, background-position, background-repeat 등이 있는데 간단하게 알아볼께요.

구체적인 사용법은 별도로 포스트하겠습니다.

 

배경크기를 정하는 background-size

.element {
  background-size: auto;
}

background-size 다음에 올 수 있는 속성값은 다음과 같습니다.

• auto : 이미지 크기를 그대로 사용합니다
• cover : 이미지 비율을 유지하면서 가로 길이에 맞춰 꽉 채웁니다
• contain : 이미지 비율을 유지하면서 세로 길이에 맞춰 꽉 채웁니다
• 00px 00px : 가로 세로 픽셀 크기를 넣을 도 있습니다
• 00% 00% : 가로 세로 이미지 비율을 넣을 수 있습니다

 

배경이미지 반복을 제어하는 background-repeat

.element {
  background-repeat: no-repeat;
}

• repeat : 배경 이미지를 반복합니다. background-repeat를 설정하지 않는다면 기본값입니다
• no-repeat: 배경 이미지를 반복하지 않습니다
• repeat-x; 배경 이미지를 가로축으로만 반복합니다
• repeat-y: 배경 이미지를 세로축으로만 반복합니다

그 외에도 space, round 여러 속성이 있지만 별도 포스트할께요.

 

배경위치를 정하는 background-position

기본적으로 배경 이미지는 반복이 되지만 위에서 설명한 background-repeat를 사용해서 이미지를 한 번만 넣을 경우, 배경 이미지의 위치도 중요합니다. 이 때 위치를 잡아주는 속성이 background-position입니다.

.element {
  background-position: center;
}

background-size 다음에 올 수 있는 속성값은 다음과 같습니다.

• center : 배경이 들어가는 요소 정가운데에 이미지를 넣습니다
• left : 요소 좌측에 이미지를 넣습니다
• right : 요소 우측에 이미지를 넣습니다
• top : 요소 상단에 이미지를 넣습니다
• bottom : 요소 하단에 이미지를 넣습니다
• 혼합 : left top, right top, right center 등 9개 방향으로 혼합하여 이용할 수 있습니다.

 

지금까지 HTML 요소에 배경 이미지를 넣는 background-image를 알아봤습니다. CSS 문법은 쉬운 듯하지만 디자인 감각이 필요하네요.