[CSS] 웹페이지 혹은 요소의 배경을 지정하는 background 속성 관련 총정리
웹페이지 혹은 웹페이지의 각 요소에 색상이나 이미지로 배경을 지정하고 싶다면, CSS 에서 background 속성을 이용하면 됩니다.
background 속성은 여러가지의 값들을 포함할 수 있는데, 먼저 각각의 요소들에 대해 알아보고 이를 한번에 적용하는 방법을 알아봅시다.
background 의 세부 속성
background 의 세부 속성에는 아래와 같은 것들이 있습니다.
- background-color: 배경의 색상
- background-image: 배경에 사용할 이미지
- background-position: 배경의 위치
- background-size: 배경 이미지의 크기
- background-repeat: 배경 이미지의 반복 여부
- background-origin: 배경 이미지를 어디서 부터 표시할지
- background-clip: 배경 이미지를 표시 하면서 어디서 부터 잘라서 표시할지
- background-attachment: 배경이 고정인지 스크롤 되는지
꽤 디테일하게 설정 할 수 있는데요. 하나씩 알아봅시다.
background-color
background-color 속성은 배경의 색상을 지정해줍니다. 흔히 쓰는 색상은 red 처럼 그냥 색상의 영문명 그 자체로 사용할 수 있으며, #ff0000 처럼 16진수로 표기된 코드를 사용할 수도 있습니다.
body { background-color: #f00; }
background-image
background-image 는 배경으로 사용할 이미지 파일을 지정해줍니다. 당연히 배경으로 사용할 이미지에 접근 할 권한이 있어야 하며, 그러려면 주소도 알아야겠죠.
body { background-image: url("bg-img.png"); }
배경화면을 여러개 사용할 수도 있습니다. 여러개를 사용할 경우 겹쳐서 보이게 됩니다. 그렇다면 당연히도 이미지 파일이 투명해야겠죠? 콤마(,)로 파일 주소를 구분하면 됩니다.
body { background-image: url("bg-img.png"), url("bg-img2.png"); }
background-position
background-position 은 배경의 위치를 결정합니다. 가로와 세로 위치를 지정할 수 있구요. 만약 한쪽만 지정한다면 나머지는 기본 값인 center 가 됩니다. % 나 px 단위로도 지정 할 수 있습니다. 이때 기준은 왼쪽 위가 (0, 0) 이 됩니다.
html{ background-position: left top; }
body { background-position: right bottom; }
.site-header { background-position: center center; }
.entry-content { background-position: 25% 50%; }
.entry-footer { background-position: 20px 50px; }
background-size
background-size 는 배경 이미지의 크기를 결정합니다. 직접 길이를 설정해도 되고 % 값으로 설정해도 됩니다.
html { background-size: 100px 200px; }
body { background-size: 50% 25%; }
재밌는 설정 값도 있습니다. 바로 cover 와 contain 값을 지정할 수 있는데 이 두 값은 아래와 같은 특징을 가집니다.
- cover: 배경 이미지의 비율 그대로 확대하여 요소의 전체를 덮음
- contain: 배경 이미지를 비율 그대로 확대하여 가로나 세로 중 꽉차는 쪽에 사이즈를 맞춤
위 두가지 속성의 주요한 차이점은 요소 전체를 덮을 것인지(cover), 배경 이미지의 전체를 표시할 것인지(contain) 여부입니다.
예를 들어 cover 를 사용할 경우 가로를 꽉차게 하느라 세로도 함께 늘려서, 이미지의 일부가 배경으로 표시 되지 않을 수 있지만, contain 을 사용하면 이미지는 전체가 다 보이지만 요소의 일부에 배경 이미지를 적용하지 못할 수도 있습니다.
background-repeat
배경 이미지의 반복 여부를 결정 합니다. 기본 값은 repeat 로 가로와 세로 모두 반복됩니다. 주로 패턴이미지를 사용 할 때 이 값을 쓰면 됩니다. background-repeat 의 값으로 사용할 수 있는 것들은 아래와 같습니다.
- repeat: 가로, 세로 모두 반복
- repeat-x: 가로만 반복
- repeat-y: 세로만 반복
- no-repeat: 반복하지 않음
background-origin
배경을 어디서 부터 표시 할지 결정합니다.
- border-box: 요소의 테두리 부터 배경 표시
- padding-box: 요소의 내부 여백 부터 배경 표시
- content-box: 요소의 내용 부분 부터 배경 표시
background-clip
배경을 어디서 부터 잘라서 표시할지 결정 합니다. 위 background-origin 하고 비슷할 수 있지만 조금 다른게 배경을 border-box 부터 표시 하되, background-clip 속성을 이용해 content-box 부터 잘라서 보여 줄 수 있습니다. 사용할 수 있는 속성은 위 background-origin 과 같습니다.
background-attachment
화면 스크롤에 따라 배경화면이 움직이게 할지 여부 입니다.
- fixed: 화면이 스크롤 되어도 배경화면은 고정
- scroll: 화면이 스코롤 됨에 따라 배경화면도 이동
local 이라는 속성도 있지만, 잘 사용되지 않으며 일부 브라우저에서만 작동합니다.
background 속성으로 한번에 설정하기
꽤 많은 세부 속성들이 있는데, background 를 이용해 한번해 설정 할 수 있습니다. 바로 아래와 같은 방법으로 말이죠.
body { background: #f00 url("bg-img.png") repeat-x fixed left top/50px 50px; }
이때 주의해야할 사항이 있습니다 background-position 과 background-size 의 표기 방법이 비슷함에 따라, 두 속성을 사용하려면 꼭 가운데 슬래시(/)를 넣어서 구분 해주어야 합니다. 위 코드에서 left top/50px 50px 이 부분입니다.
내용이 조금 길어졌는데 사실 이렇게 디테일하게 쓰지 않아요. 필요한 속성만 골라서 잘 사용해 봅시다.
댓글 남기기