| 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-color｜background-image｜
background-repeat｜background-attachment｜background-position
<html>
<head>
<style
type="text/css">
BODY{background:pink
url(image/bg_02.gif) no-repeat
fixed}
</style>
</head>
<body>
음..
안녕?
</body>
</html>
<이전
목록
다음> |
