Programming/HTML CSS
1. CSS background 사용
.bk {
 background-image:url(./sample.jpg);
 background-position:50%, 0%;
}
▶ CSS 정의
<body class="bk">
</body>
▶ CSS 적용

2. CSS background 속성

(1) background-color

배경색을 지정합니다. 이 속성의 값으로는 red, blue와 같은 색상명 또는 #RRGGBB 나 #RGB 와 같은 형식의 값을 사용할 수 있으며 RGB(x, x, x) 혹은 RGB(x%, x%, x%) 와 같은 형태(예: color:RGB(255, 0, 0))도 사용할 수 있습니다. 이때 x는 0~255까지의 값이여야 합니다.

transparent 라는 값도 지정할 수 있는데 이 속성의 의미는 투명입니다.

(2) background-image

배경이미지를 지정합니다. 이미지는 url을 사용하여 해당 이미지가 위치한 url경로를 지정하면 됩니다. CSS에서 url 단위를 입력할때는 통상 url 함수를 사용합니다.
background-image: url('./sample.jpg'); /* 최상위 에서의 sample.jpg */
background-image: url('sample.jpg'); /* 현재 경로에서의 sample.jpg */
background-image: url('sample/sample.jpg'); /* 현재 경로에서의 sample 안에 sample.jpg */
CSS3에 들어서는 이 속성을 사용해 아래와 같이 여러개의 이미지를 동시에 지정할 수 있게 됐습니다.
background-image: url('sample1.jpg'), url('sample2.jpg'), url('sample3.jpg');
이런 경우 맨 오른쪽의 이미지 부터 왼쪽 이미지까지의 순으로 겹쳐서 표시하게 됩니다. 따라서 가장 왼쪽의 이미지가 가장 위로 올라오게 됩니다.

(3) background-repeat

background-image를 사용한 경우 해당 이미지의 반복형태를 지정합니다. repeat(수직, 수평 반복), no-repeat(반복없음), repeat-x(수평반복), repeat-y(수직반복)값을 사용합니다.

(4) background-attachment

익스플로러 전용속성으로 background-image 속성을 사용한 경우 해당 이미지의 고정형태를 지정하는 것인데 이 속성의 값을 scroll로 지정하면 스크롤을 올리거나 내림에 따라 배경이미지도 같이 이동하며 fixed로 지정하면 스크롤 올림/내림 여부와는 상관없이 이미지가 고정됩니다.

(5) background-position

background-image 속성을 사용한 경우 이미지를 표시할 위치를 지정합니다. 이 위치는 50% 50% 와 같은 형태로 지정하는데 왼쪽 %값은 가로를, 오른쪽 %값은 세로를 의미합니다. 값의 단위를 %이외에 px단위 입력도 가능합니다.
background-position: 50px, 50%;
위 예제에서 처럼 값을 지정하는 것 이외에 bottom(아래), center(가운데), left(왼쪽), right(오른쪽), top(위)등의 키워드를 사용할 수도 있습니다.

(6) background-size

% 또는 px 단위를 사용하여 이미지의 크기를 지정합니다. 값의 지정은 다음과 같이 하며
background-size: 50px, 100px;
첫번째 값은 넓이 두번째 값은 높이를 의미하게 됩니다. 참고로 크기 값의 지정에서 넓이에 contain 키워드를 사용하는 경우 100%로 지정한 것과 같고, cover 키워드를 사용한 경우 높이를 100%로 지정한 것과 같습니다.

만일 background-image 속성에서 두개 이상의 이미지를 지정한 경우 각각의 이미지에 크기를 지정하려면 쉼표를 통해 각 이미지에 대한 크기를 순서대로 지정하면 됩니다.
background-size: 50px 100px, 40%, 50%;
이 속성은 CSS3 전용이므로 웹 브라우저가 비교적 최신이어야 합니다.

(7) background

1 에서 6번까지 소개해 드린 모든 속성은 아래와 같은 순서를 통해 한꺼번에 입력할 수 있습니다.

background: background-image background-position / background-size background-repeat background-attachment background-color;

'Programming > HTML CSS' 카테고리의 다른 글

[HTML / HTML5] hr (수평선)  (0) 2013.04.08
[HTML / HTML5 / CSS] img (이미지)  (0) 2013.04.05
[CSS] background  (0) 2013.04.04
[CSS] letter-spacing  (0) 2013.04.03
[CSS] line-height  (0) 2013.04.02
[CSS] text  (0) 2013.04.01
0 0