[CSS] 배경(background)에 대해서

CSS 배경(background)

HTML태그에서 배경을 지정하는 방법은 배경색(bgcolor)과 배경이미지(background) 속성밖에 사용할 수 없었지만 CSS에서는 보다 다양한 방법으로 배경을 지정할 수 있습니다. 속성 설명 값 background-color 배경색을 지정할 수 있습니다. #FFFF80, Ivory background-image 배경이미지를 지정할 수 있습니다. url(bg.gif) background-repeat 배경이미지의 반복 여부를 지정합니다. repeat, repeat-x, repeat-y, no-repeat background-position 배경이미지의 위치를 지정합니다. top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right background-attachment 배경이미지의 스크롤 여부를 지정합니다. scroll, fixed

CSS 배경색(background-color) 지정

background-color 속성을 사용하면 배경색을 지정할 수 있습니다. <div style="height:50px; background-color: ivory">ivory배경색이 지정된 예제</div> 속성값으로 ivory라는 색상명(color name)을 사용했는데, Hex 코드값을 사용해도 됩니다. <div style="height:50px; background-color: #FFFFF0">ivory배경색이 지정된 예제</div> ivory배경색이 지정된 예제

CSS 배경이미지(background-image)

background-image 속성을 사용하면 배경 이미지를 지정할 수 있습니다. <div style="width:250; height:250; background-image: url(bg.gif)"></div> 250*250 크기의 레이어에 100*100 크기의 배경이미지를 적용했기에 배경이미지가 반복적으로 출력됩니다.

CSS 배경이미지의 반복(background-repeat)

background-repeat 속성을 사용하면 배경이미지의 반복을 지정할 수 있습니다. 속성값으로 아래와 같이 4가지를 사용할 수 있습니다. repeat : 배경이미지가 반복적으로 적용됩니다. 기본값입니다. repeat-x : 배경이미지가 가로방향으로만 반복적으로 적용됩니다. repeat-y : 배경이미지가 세로방향으로만 반복적으로 적용됩니다. no-repeat : 배경이미지가 반복적으로 적용되지 않고 한번만 적용됩니다. <div style="width:250; height:250; background-image: url(bg.gif) ; background-repeat:repeat-x"></div> <div style="width:250; height:250; background-image: url(bg.gif) ; background-repeat:repeat-y"></div>

CSS 배경이미지의 위치(background-position)

background-repeat 속성값으로 no-repeat을 지정하면 배경이미지가 반복되지 않고, 문서의 왼쪽 상단에 위치합니다. <div style="width:250; height:250; background-image: url(bg.gif) ; background-repeat:no-repeat"></div> 이 위치를 바꿀때 사용하는 속성이 background-position 입니다. <table width="90%" cellpadding="0" cellspacing="0" border="1" align="center" style="background-image: url(bg.gif) ; background-repeat:no-repeat; background-position:center right"> <tr height="100">  <td width="30%">top left</td>  <td width="30%">top center</td>  <td width="30%">top right</td> </tr> <tr height="100">  <td>center left</td>  <td>center center</td>  <td>center right</td> </tr> <tr height="100">  <td>bottom left</td>  <td>bottom center</td>  <td>bottom right</td> </tr> </table> 예제에서는 center right 값으로 지정하였습니다. top left top center top right center left center center center right bottom left bottom center bottom right

CSS 배경이미지의 스크롤여부(background-attachment)

background-attachment 속성을 사용하면 문서가 스크롤될때 배경이미지의 스크롤여부를 지정할 수 있습니다. 이 속성을 사용하지 않으면 기본적으로 문서와 함께 스크롤이 됩니다. background-attachment : fixed 로 지정하면 문서는 스크롤되지만 배경이미지는 스크롤 되지 않아서 배경위에 텍스트가 떠있는 느낌을 표현할 수 있습니다. 예제를 다운받아서 연습해 보시면 됩니다.