Untitled Document

속성값

2. background 속성

스타일시트는 모든 요소는 여러 겹의 상자로 둘러쌓여 있다고 가정한다. margin, border, padding 속성을 이용해 각각의 폭이나 색을 조정할 수 있다.
간단하게 그림으로 표시하면 아래와 같다.

1) background-color
속성값: 색상 값 또는 RGB|transparent
배경색을 지정하는 요소이다. 기본값은 transparent이다.

<html>
<head>
<style type="text/css">
H1 {background-color:#F00}
</style>
</head>
<body>
<H1> FF00000에 해당하는 색 </H1>
</body>
</html>

 

2) background-image

속성값: URL|none
요소의 배경이미지를 만든다. 배경색을 지정하면 이미지가 배경색 위에 표시된다.

body{background-image:url(이미지경로);}

<html>
<head>
<style type="text/css">
<!--
body{background-image:none}
p{background-image:url(bg_01.gif)}
-->
</style>
</head>
<body>
이 곳에는 배경이 없습니다.<br>
<p>여기는 보이죠?</p>
<p>계속 보이나요???</p>
</body>
</html>

 

3) background-repeat

속성값: repeat|repeat-x|repeat-y|no-repeat
배경이미지가 지정될 때 사용되는 속성으로 이미지를 어떻게 반복할 것인지를 결정한다. 초기값은 repeat다. background-repeat속성을 사용하면 사용자가 원하는 방향으로연속시키거나 연속되지 않도록 할 수 있다.

<html>
<head>
<style type="text/css">
body{background-color:#fcf
background-image:url(image/bg_03.gif);
backround-repeat:repeat-y;}
</style>
</head>
<body>
본문 전체가 배경 이미지로 덮인다. 세로 방향으로 연속이다. 배경이미지가 투명이라서 배경색깔이 보입니다.
</body>
</html>

 

  • repeat: 가로, 세로 모두 연속된다.
  • repeat-x: 가로방향으로만 연속된다.
  • repeat-y: 세로 방향으로만 연속된다.
  • no-repeat: 그림 한 개만 나온다
4) background-attachment
속성값: scroll |fixed
배경 그림으로 사용한 그림의 위치가, 적용된 element와 함께 움직이는지, 브라우저의 화면에 고정되는지를 결정한다. 초기값은 scroll이다.
5) background-position

속성값: percentage|length|top/center/bottom|top/center/bottom
배경 그림이 들어갔을 때, 그 시작점을 어디로 할 것인지를 정한다.
초기값은 0%, 0%이다.

<html>
<head>
<style type="text/css">
body{background-color:#fcf;
background-image:url(image/bg_03.gif);
background-position:left bottom
}
</style>
</head>
<body>
<font color=blue>잘 보면 배경 이미지가 왼쪽 아래가 기준이 되어서 퍼지는 것을 볼수가 있습니다.</font>
</body>
</html>

 

6) background

속성값:background-colorbackground-image| background-repeatbackground-attachmentbackground-position

<html>
<head>
<style type="text/css">
BODY{background:pink url(image/bg_02.gif) no-repeat fixed}
</style>
</head>
<body>
음.. 안녕?
</body>
</html>

<이전   목록   다음>

Copyright ⓒ2001∼2003, alza.wo.to All Rights Reserved.