[ CSS 입문 ] background 속성

| 개요

background 속성은 태그의 배경을 지정하는 속성입니다.

한번에 여러가지 속성을 사용할 수 있습니다.

 

• background-color : 배경색
• background-image : 배경 이미지
• background-size : 배경 이미지 사이즈
• background-repeat : 배경 이미지 반복
• background-position : 배경 이미지 위치

 

 

| 사용법

background-color

배경색을 의미하며, 값은 color속성의 포맷을 사용합니다.

색상을 사용할때 그라디언트 속성을 이용할 수 도 있는데 이는 'background-image' 에서 넣을 수 있습니다.

 

 

background-image

배경 이미지를 설정하며, 주로 이미지 경로를 지정하는 방식으로 사용합니다. 이때엔 'background-image: url("이미지경로")' 처럼 작성합니다.

 

특별한 점은 컨테이너의 크기와 상관없이 삽입된 이미지의 크기는 따로 지정하지 않는 이상 맞춰저 늘어나거나 줄어들지 않으면 원본이미지 사이즈 그대로를 출력합니다. 그래서 컨테이너에 비해 작은 이미지가 들어오게 되면 이미지가 반복되어 마치 패턴과 같은 효과를 볼수 있으며, 별도의 'background-size' 를 통해 이미지의 크기를 정하거나 'background-repeat'으로 반복되는 것을 제거할 수 있습니다.

이미지를 넣을 때 큰이미지를 넣게 되면 불러올때 느려지는 부분을 생각해 일부러 작은 사이즈의 이미지를 반복시켜 백그라운드 반복을 하여 전체에 깔아 배경을 만들어주는 경우도 많이 있습니다.

 

그리고 그라디언트 속성을 이용할 수 있습니다.  이때엔 'background-image: linear-gradient(방향, 시작색상, 종료색상)' 등 으로 작성됩니다.

 

• linear-gradient : 선형 그라디언트
• repeating-linear-gradient : 반복 선형 그라디언트
• radial-gradient : 방사형 그라디언트
• repeating-radial-gradient : 반복 방사형 그라디언트

 

색상은 여러가지를 입력할 수 있으며, '%'를 이용해 각 색상의 크기도 조절할 수 있습니다.

 

 

background-size

배경 이미지의 크기를 조절할 수 있습니다. 배경이미지의 비율이 컨테이너사이즈의 비율과 동일하다면 그대로 사이즈를 맞춰서 키울 수 있겠지만 그렇지 못하다면 컨테이너 사이즈에 맞춤 또는 원래 이미지 비율로 상하 크기 또는 좌우 크기에 맞춰 사이즈가 변형될 수 도 있습니다.

 

• background-size : x px y px; - 가로 x px(픽셀)만큼의 크기, 세로 y px(픽셀)만큼의 크기
• background-size : x % y %; - 컨테이너 사이즈 기준 가로 x %(퍼센트)만큼의 크기, 세로 y %(퍼센트)만큼의 크기
• background-size : cover; - 이미지 크기 비율 그대로 유지한 상태에서 이미지의 사이즈를 가로 또는 세로 이미지에 맞춤
• background-size : contain; - 이미지 크기 비율 그대로 유지한 상태에서 컨테이너 사이즈 가로 또는 세로의 크기 한쪽에 최대 사이즈로 스케일이 조정된다.

 

 

background-repeat

배경 이미지의 배열을 정할 수 있는 속성입니다. 반복을 원하는 방향으로 시킬 수 도 있고, 반복을 안시킬 수 도 있습니다.

 

• repeat : 기본값으로, 가로 세로 반복적으로 배경이미지를 반복합니다.
• repeat-x : 이미지가 가로로만 반복합니다.
• repeat-y : 이미지가 세로로만 반복합니다.
• no-repeat : 이미지가 반복하지 않습니다.

 

 

background-position

배경 이미지의 위치(좌표)를 지정할 수 있는 속성입니다. 이전에 했던 margin, padding 속성과 비슷하게 띄어쓰기를 기준으로 위치를 지정하며, 픽셀뿐 아니라 다른 단위도 지정이 가능하며 left, top, center, bottom, right 등의 상수도 사용이 가능합니다.

배경 이미지 위치 값은 배경 이미지 사이즈와 동일하게 컨테이너 사이즈를 기준으로 움직입니다.

 

예를 들면 백그라운드 사이즈를 지정하고 정 가운데로 하고 싶다면 'background-position: center center;' 또는 'background-position: 50% 50%;' 등과 같이 x축에서의 위치와 y축에서의 위치값을 입력을 해주면 됩니다.