배경 이미지가 어떻게 고정되는지 나타냅니다.
body {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
위 설정은 배경 이미지가 반복되지 않고, 위치는 고정되어 나타납니다. background-attachment 속성에 사용할 수 있는 값은 scroll, fixed, inherit 값이 있습니다.
배경색을 지정할 때 사용합니다. 다음은 배경색을 지정하는 여러 가지 방법입니다.
body { background-color:yellow; }
h1 { background-color:#00ff00; }
p { background-color:rgb(255,0,255); }
배경 이미지를 지정할 때 사용합니다.
body { background-image:url('paper.gif'); }
배경 이미지의 포지션을 지정할 때 사용합니다.
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%이동합니다.
배경 이미지의 사이즈를 지정할 때 사용합니다.
div {
background-image:url('img_flwr.gif);
background-size:80px 60px;
backtround-repeat:no-repeat;
}
'HTML& CSS > CSS' 카테고리의 다른 글
<div>태그, <span>태그 각각의 특성(블럭 요소와 인라인 요소) (0) | 2012.05.16 |
---|---|
텍스트 (0) | 2012.05.15 |
폰트 (0) | 2012.05.15 |
position속성에 absolute을 사용하여 수직정렬하는 방법 (0) | 2011.04.26 |
엘레멘트를 감추는 방법 (0) | 2011.04.04 |