▣ 문서에 바탕색 넣기
<html>
<head>
<title>문서에 바탕색 넣기</title>
<style type="text/css">
<!--
body {background-color: 색상코드를 넣으세요}
-->
</style>
</head>
<body>
문서 내용
</body>
</html>
▣ 배경이미지 넣기
<html>
<head>
<title>배경이미지 넣기</title>
<style type="text/css">
<!--
body {background-image:url(여기에 이미지 경로를 넣으세요)}
-->
</style>
</head>
<body>
문서 내용
</body>
</html>
☆ 반복됨이나 위치 등을 정해 줄 필요가 있을 땐
<style type="text/css">
<!--
body {background-image:url(여기에 이미지 경로를 넣으세요);
background-repeat:no-repeat;
background-position:right center;background-attachment:fixed}
-->
</style>
background-repeat no-repeat는 이미지가 반복되어 나타나지 않게 하는 거예요.
repeat-x는 가로로만 반복
repeat-y 는 세로로만 반복
background-position right center는 '오른쪽의 중앙'에 있게 한 거예요.
left, center, right, top, middle, bottom
background-attachment fixed는 이미지를 고정시키는 거예요.
스크롤바를 움직여도 이미지는 자리를 지키고 있고 내용(텍스트나 내용 안의 이미지)만 움직이는 거랍니다.
위의 소스를 좀더 짧게 만들어 볼까요?
<style type="text/css">
<!--
body {background:url(myworks/bgimage/bgimage7.gif) no-repeat fixed 50% 50%}
-->
</style>
위 소스를 복사해서 태그연습장에 넣어서 보시면 페이지 중앙(위에서 50%, 좌측에서 50%되는 위치)에 체크무늬 이미지가 띄워져 있는 걸 보실 수 있으실 거예요*
