body에 background, background-images 사용하기 + 예제

Background를 활용해 보아요.의 첫번째 예제.
HTML 문서의 배경에 색상과 이미지를 적용해 보자.

HTML문서의 바탕에 색상을 넣거나 배경 이미지를 커다랗게 깔아야할 경우이다.

기존의 방식으로 배경 제어하기

<body background="bgimage.jpg">

이렇게 body에 직접 유효하지 않은 bgcolor 코드와 style을 입력하는 경우가 많다.


CSS로 배경 제어하기

배경색 설정하기

body {
    background-color: #FC0;
}
background-color:#FC0;
배경 색상을 #FC0로 설정함.

배경 이미지 설정하기 (고정된 이미지 한 개 사용)

body {
    background-image: url(images/bg.gif);
    background-repeat: no-repeat;
}
background: url(images/bg.gif) no-repeat;
의자 이미지 1개를 배경에 넣음.

배경 이미지 설정하기 (이미지 한 개를 반복해서 패턴으로 사용)

body {
    background-image: url(images/bg.gif);
    background-repeat: repeat; /* 기본 값이므로 설정하지 않아도 된다 */
    /*
    가로로만 반복할 경우는 repeat-x
    세로로만 반복할 경우는 repeat-y
    */
}
background: url(images/bg.gif);
의자 이미지를 배경에 넣고 반복시킴.

배경색과 이미지를 함께 배경에 설정하기

body {
    background-color: #FFC;
    background-image: url(images/bg_02.gif);
    /*
    단축:
    background: #FFC url(images/bg_02.gif) repeat-x;
    */
}
background: url(images/bg.gif);
배경 색상 #FC0로 넣음 + 의자 이미지를 배경에 넣고 x축만 반복시킴.

참고 사항

repeat등 기본값이 정해져 있는 속성의 경우는 값을 따로 지정하지 않아도 된다.
하지만 배경 이미지를 사용하면서 단축속성shorthand을 사용할 경우는 배경 색상을 입력하지 않으면 validator에서 warning을 띄운다.

관련 링크