CSS - background 자주 사용하는 속성 정리

CSS

마지막 업데이트 4년 전

홈페이지 작업할 때 배경을 처리하는 background의 속성을 자주 잊어버려서 (특히, 영어철자가…;;;) 간단하게 정리해봅니다.

* background 속성

background-color: #BCCDBE;
background-color: rbga(188,205,190, 0.3);

background-image: url("이미지 경로");

background-position : 왼쪽부터 표시되는 배경을, position으로 배경의 위치를 조정할 수 있습니다. 속성값으로는 left, right, top, center, bottom 이 있고 첫번째 입력값이 수평위치, 두번째 입력값이 수직위치를 뜻합니다. % 혹은 px 값을 지정하여 위치를 조정할 수도 있습니다.

background-position: center top;
background-position: 20% 30%;
background-position: 10px 40px;

background-size : 배경이미지의 크기를 조절합니다. 속성값으로는 auto, cover, contain이 있습니다. px 혹은 % 로 직접 값을 입력할 수도 있습니다.
- auto : 디폴트값입니다. 이미지의 원본사이즈로 표시합니다.
- cover : 배경을 표시하는 구역에 모두 표시되도록 배경이미지를 조절하여 표시합니다. 구역에 모두 표시하기 위해 구역보다 원본이미지가 크거나 작다면, 이미지가 잘리거나 늘려서 표시됩니다.
- contain : 배경 이미지가 완전하게 표시되도록 이미지의 크기를 조절하여 배경구역에 표시합니다. 배경구역의 비율과 이미지의 비율이 다를경우 이미지가 반복되어 표시될 수 있습니다.

background-size: contain;
background-size: 80%;
background-size: 400px;

background-repeat : 배경이미지 반복여부를 지정합니다. 속성값으로는 repeat, repeat-x, repeat-y, no-repeat, space, round, initail, inherit 등이 있습니다.
- repeat : 디폴트값입니다. 이미지를 반복해서 표시합니다.
- repeat-x : 배경이미지를 가로방향으로 반복합니다.
- repeat-y: 배경이미지를 세로방향으로 반복합니다.
- no-repeat : 배경이미지를 반복없이 한 번만 표시합니다.
- space : 배경 이미지가 화면에 잘리지않게 가능한 반복해서 표시합니다. 첫번째와 마지막 이미지는 배경구역의 양쪽에 고정되고, 반복된 이미지들 사이의 여백은 균등하게 표시됩니다.
- round : 배경이미지들 사이에 여백없이, 화면에 가득표시되도록 배경이미지 크기를 줄이거나 늘려서 반복표시합니다.

background-repeat: no-repeat;
background-repeat: space;

이외에 background-origin, background-clip, background-attachment가 있는데, 이것은 다음에 소개하도록 하겠습니다.

background 와 관련한 예제가 필요하신 분은 w3school의 CSS background Property 페이지를 참고하시면 도움되실 겁니다.

background의 여러 속성을 한 번에 쓸 수 있는 CSS 문법은 다음과 같습니다.

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

안녕하세요?^^ 개발자라는 소리를 듣고 싶어 늦은 나이에 개발의 세계에 몸담게 된 Brad 라고 합니다. 아직 개발의 'ㄱ' 자도 모르지만, 개발을 배우면서 알게되는 것들을 림프에 정리해보려고 합니다. 저의 부족한 글이 누군가에게 조금이나마 도움이 되길 바랍니다.