배경(background)

 

 

background-attachment

 

배경 이미지가 어떻게 고정되는지 나타냅니다.

 

body {

background-image:url('smiley.gif');

background-repeat:no-repeat;

background-attachment:fixed;

}

 

위 설정은 배경 이미지가 반복되지 않고, 위치는 고정되어 나타납니다. background-attachment 속성에 사용할 수 있는 값은 scroll, fixed, inherit 값이 있습니다.

 

 

 

background-color

 

배경색을 지정할 때 사용합니다. 다음은 배경색을 지정하는 여러 가지 방법입니다.

 

body { background-color:yellow; }

h1 { background-color:#00ff00; }

p { background-color:rgb(255,0,255); }

 

 

 

background-image

 

배경 이미지를 지정할 때 사용합니다.

 

body { background-image:url('paper.gif'); }

 

 

 

background-position

 

배경 이미지의 포지션을 지정할 때 사용합니다.

 

body {

background-image:url('smiley.gif');

background-repear:no-repeat;

background-attachment:fixed;

background-position:center;

}

 

position 값이는 left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom 등이 가능합니다. 만약 25% 75% 로 값을 입력하면 X축으로 25%이동하고 Y축으로 75%이동합니다.

 

 

 

background-size

 

배경 이미지의 사이즈를 지정할 때 사용합니다.

 

div {

background-image:url('img_flwr.gif);

background-size:80px 60px;

backtround-repeat:no-repeat;

}