CSS : Background를 활용해 보아요. 기본 속성 설명.

테이블table기반일 땐 왠지 싫어했던 백그라운드background 항목! 한 껏 이용하려면 어떻게 해야할까?
Background. 배경.
table기반일 땐 괜히 싫어 했다는 말은 순전히 나의 개인적인 취향이었지만, 지금도 비슷한 생각을 가지고 있는 사람이 있으리라고 생각한다. 당시에 background를 싫어했던 유일한 이유는. CSS를 잘 활용하지 못 했기 때문이다.

오래전에 내가 CSS를 사용하는 것은, 단지 body의 배경 색상이나 이미지를 조정하고 전체 문서의 폰트를 9pt로 맞추기 위해서 사용하는 것이었다.
따라서 한개의 td나 table에 배경 이미지를 사용하기 위해서는 HTML코드 안에서 아래 처럼 사용했다.

<td style="background: url(images/bg.gif);" >

가뜩이나 중복 table때문에 HTML의 코드가 정신이 없는 상태에서 배경을 깔기 위한 코드가 더해지면 더더욱 코드가 지저분 해졌기 때문에 싫어했던 것이다.

하지만 background 항목에 대해 잘 이해하고 CSS를 적극적으로 사용하여 코드를 정리해주기 시작하면, 여러 부분에 걸쳐 유용하게 사용할 수 있는 기특한 녀석이다. 특히 웹디자이너라면 적극 사용해야 할 리스트 0순위에 올려야 할 것이다.

그렇다면 background-배경속성을 어디에 어떻게 활용할 수 있을 지, 예제를 몇개 만들어 보기로 했다.


아래는 참고용으로, background의 기본 속성에 대한 설명이다.

Background의 기본 속성

background-color

배경 색상을 설정한다.

body { background-color: #F30; }
p { background-color: blue; }

background-image

배경 이미지를 설정한다.
배경 색상과 배경 이미지를 함께 설정해 주면 배경 색상 위에 배경 이미지가 표시된다.

body { background-image: url(image/bg.gif); }

background-repeat

배경 이미지를 사용할 경우 반복될 패턴을 설정해준다.
설정하지 않을 경우의 기본값은 repeat이다.


div {
    background-repeat: repeat;
    /* 기본값. 사방으로 패턴을 반복한다 */

    background-repeat: repeat-x
    /* 가로로만 패턴을 반복한다 */

    background-repeat: repeat-y
    /* 세로로만 패턴을 반복한다 */

    background-repeat: no-repeat;
    /* 패턴을 반복하지 않고, 패턴 이미지를 단 한 번 만 표시한다. */
}

background-attachment

문서가 길어질 경우 혹은 스크롤이 있는 박스 안에서 배경이미지가 있을 경우, 이미지가 스크롤에 영향을 받을지 아닐지를 설정한다.
설정하지 않을 경우의 기본값은 scroll이다.

background-attachment: scroll;
문서를 스크롤 할 경우 배경 이미지가 문서를 따라 오르고 내린다.
background-attachment: fixed;
문서를 스크롤 할 경우 배경 이미지가 고정된 위치를 가진다.예를 들어 body에 fixed로 배경이미지를 적용한 경우 컨텐츠는 오르고 내리되, 배경 이미지는 움직이지 않는다.

예제1

 
background-attachment: scroll; 경우
이 상자의 스크롤을 내려보세요. 배경이 스크롤바와 함께 움직입니다.
(Firefox, Chrome, Safari에서는 fixed와 동일함.)

 

 

예제2

 
background-attachment: fixed; 경우
이 상자의 스크롤을 내려보세요. 배경이 움직이지 않습니다.

 

 


background-position

배경 이미지의 위치를 설정해준다.
좌측 상단을 기준으로 픽셀 좌표나 퍼센트로 설정하거나 top, left, center, right, bottom을 설정할 수 있다.


div {
    background-position: top left;
    /* 상단 좌측에 위치 */

    background-position: right bottom;
    /* 하단 우측에 위치 */

    background-position: left;
    /* 중앙 좌측에 위치 */

    background-position: top;
    /* 중앙 상단에 위치 */

    background-position: 200px;
    /* 좌측으로 부터 200px 부분에 위치 */

    background-position: 200px 40px;
    /* 좌측으로 부터 200px, 상단으로 부터 40px 부분에 위치 */
}

background (shorthand-단축속성)

위의 항목들을 다음과 같이 줄여 쓸 수 있다.


div {
    background: red;
    /* 색상만 설정 */

    background: #F00 url(images/bg.gif) no-repeat scroll left top;
    /* 모든 항목을 다 설정 */

    background: #F00 url(images/bg.gif) no-repeat;
    /* 배경 색상, 이미지, 반복 여부 설정 */
}

관련 링크