배경 속성 아직도 모르는 사람?

필자는 실제로 프로젝트에서 CSS 작성할 때 제일 기억 안 나는 부분 중에 하나가 배경 속성이었음... 그렇기 때문에 배경속성을 오늘 꼭 마스터해보도록 하겠다.

background-color

요소의 배경의 색상을 넣을 수 있음.

div {
	background-color: red;
}

아래와 같이 사용할 수도 있음.

div1 {
	background-color: rgb(0,0,255);
}

div2 {
	background-color: rgba(0,0,255,.5);
}

div3 {
	background-color: #00f;
}

background-image

요소의 배경에 이미지를 넣을 수 있음.

div {
	background-image: url('경로');
}

CSS3부터는 여러 개의 배경 이미지를 적용할 수 있음.
이때 왼쪽 이미지가 앞으로 나오게 되어 중첩된 이미지를 출력하게 된다.

div {
	background-image: url('경로1'), url('경로2');
}

background-repeat

요소의 배경 크기가 삽입하려는 이미지보다 클 때 이미지를 자동으로 반복해서 채움.
반복 설정을 변경할 수 있음.

div {
	width: 320px;
    height: 120px;
	background-image: url('경로');
    background-repeat: no-repeat;
}

아래와 같은 속성을 사용할 수 있음.

no-repeat : 이미지를 반복하지 않음.
repeat-x : 가로 방향으로 반복.
repeat-y : 세로 방향으로 반복.
repeat : 가로/세로 방향으로 반복.
round : 이미지를 반복하되 이미지가 요소 크기에 딱 맞도록 크기를 자동 조절.
space : 이미지가 잘리지 않도록 반복.
inherit : 부모 요소의 속성값을 상속받음.

background-size

배경의 크기를 조절할 수 있음.

div {
	width: 80px;
    height: 60px;
    background-image: url('경로');
    background-size: 80px 60px;
}

크기를 직접 지정할 수도 있지만, 아래와 같은 속성을 사용할 수 있음.

auto : 이미지 크기를 유지.
cover : 가로/세로 비율을 유지하면서 크기를 확대하거나 축소해 요소의 배경에 꽉 채움.
contain : 가로/세로 비율을 유지하면서 이미지가 배경 요소 안에 들어가도록 크기를 확대하거나 축소.

cover과 contain

cover: 요소에 이미지를 최대한 크게 보여줍니다. (이미지가 잘릴 수 있음)
contain: 요소에 이미지를 최대한 크게 보여주되 동일한 비율을 유지. (이미지가 잘리지 않음) 즉, 가로와 세로 중 한 부분이 가득차면 그 상태에서 멈춤.

background-attachment

요소에 삽입된 이미지를 스크롤할 때, 이미지의 작동 방식을 결정할 수 있음.

div {
    background-image: url('경로');
    background-attachment: scroll;
}

scroll 외에 다음과 같은 속성을 사용할 수 있음.

local : 삽입된 이미지가 요소와 웹 브라우저에서 모두 스크롤. (이미지 고정없이 같이 스크롤)
scroll : 삽입된 이미지가 요소에서는 고정, 웹 브라우저에서는 스크롤. (해당 영역의 이미지 고정)
fixed : 삽입된 이미지가 요소와 웹 브라우저에서 모두 고정. (전체 영역에서 이미지 고정)

말만 들으면 감이 안 오는데 직접 실행해보면 감이 온다.
background-attachment
이 곳에서 예제들을 보면 바로 감을 잡을 수 있음.

background-position

삽입하려는 이미지의 위치를 결정할 수 있음.

div {
	background-image: url('경로');
    background-repeat: no-repeat;
    background-position: 10% 100px;
}

가로 위치와 세로 위치는 다음과 같은 값을 이용할 수 있음.

가로 위치 값 : left, center, right, %, px, rem, em
세로 위치 값 : top, center, bottom, %, px, rem, em

보통 background-position은 background-size를 cover로 지정하여 사용하면 효과가 좋음
-> background-position을 center로 지정하면, 이미지가 정중앙에 위치하는 것처럼 보이기 때문.

background로 한 번에 지정하기

background: <color> <image> <repeat> <position/size> <attachment>;

다음과 같이 사용할 수 있다. 이때, 주의할 점은 나열 순서는 정해져 있지 않지만, size 속성은 항상 position 속성을 작성 뒤 슬래시(/)로 구분한 후 사용함.

단, 순서가 상관없기 때문에 의미를 한 눈에 파악하기가 어려우므로 속성을 따로 작성하는 걸 추천.