[CSS] 배경이미지의 스크롤여부 & 배경 이미지의 위치 & 배경 이미지 반복

LONG

 

 

background-image 속성을 사용하면 배경 이미지를 지정할 수 있습니다.

 

<div style="width:250; height:250; background-image: url(bg.gif)"></div>

250*250 크기의 레이어에 100*100 크기의 배경이미지를 적용했기에 배경이미지가 반복적으로 출력됩니다.

ARTICLE

http://www.homejjang.com/07/background-attachment.php 입니다.

background-attachment 속성을 사용하면 문서가 스크롤될때 배경이미지의 스크롤여부를 지정할 수

있습니다. 이 속성을 사용하지 않으면 기본적으로 문서와 함께 스크롤이 됩니다.

background-attachment : fixed 로 지정하면 문서는 스크롤되지만 배경이미지는 스크롤 되지 않아서

배경위에 텍스트가 떠있는 느낌을 표현할 수 있습니다.

 

 

============================================================================================

 

 

   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

 

 

===========================================================================================

 

 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>