특정 부분에만배경 이미지가들어갈때..(또는 제외할때 응용하세요.)
<style type="text/css">
body(background-image:none} --> 요건 배경이미지가 없다는것입니다.
.bgbox{background-image:url(back.gif)} --> 요건 배경이미지가 back.gif 이네요..^^
</style>
<body>
이부분엔 배경이미지가 없어요^^<br>
<p class="bgbox">이 부분에만 배경이미지가 있어요~~</p>
</body>
배경을 이미지로 깔아줬을때 보여지는 화면보다 이미지가 작을 경우 이미지는 바둑판 형태로
반복되게 화면을 채워줍니다.
그렇지만 계속된 반복으로 처리되면 안될 배경이미지도 있습니다.
아직까지 없으셨나용...?? 곧 생깁니다..^^;
- 배경 이미지 반복속성 변경시..
<style type="text/css">
body{backgrond-image:url(back.gif); background-repeat:repeat-y;}
</style>
<body>
back.gif 이미지로 배경이 깔리게 되는데...
background-repeat:repeat-y 의 영향을 받아 계속된 반복으로 화면이 채워지는것이 아니라
세로 방향으로만 반복해서 나타납니다.
</body>
background-repeat:repeat(배경이미지가 가로세로 양방향으로 반복해서 나타나는 것인데..
기본으로 설정된 것이므로 이 속성을 원할땐 안 넣으셔도 됩니다.)
background-repeat:repeat-x(배경이미지가 가로 방향으로만 반복해서 나타납니다.)
background-repeat:repeat-y(배경이미지가 세로 방향으로만 반복해서 나타납니다.)
background-repeat:no-repeat(배경이미지가 반복되지 않고 한번만 나타납니다.)
- 배경 이미지의 시작위치 지정하기
(배경이미지는 기본설정되어있는것이 브라우저의 좌측상단부터 채워지게 됩니다.
그런데.. 이 시작위치를 바꾸는 것이지요...)
<style type="text/css">
body{background-image:url(back.gif);background-position:30% 50%;}
</style>
이렇게 지정을 해주면 background-position:30% 50% 의 영향으로
배경이미지는 위에서 30% 그리고 좌측에서 50% 되는 위치에 반복되게 됩니다.
이값은 퍼센트로 지정해주었지만.. 픽셀로 지정해 줄수도 있습니다.
요건 조금 복잡해 보일수도 있겠네요.. 사용하는 일은 드물지요..^^;;
잘 쓰지두 않는거 왜 떠드느냐.. 알아두믄 유용하니까... 먼소린지..-.-ㅋ
* 스타일쉬트에서 배경색 지정하기
<p style="background-color:#999999">요렇게 배경색을 지정해줍니다.</p>
* 배경이미지 고정하기
html문서에서 텍스트가 많을 경우에는 자동적으로 스크롤 바가 생기게 되죠..?
또한 페이지를 스크롤하게 되면 자동으로 백그라운드 이미지도 같이 움직이게 됩니다.
그래서 백그라운드 이미지는 따라 움직이지 않고 멈춰 있게 만드는 소스입니다.
<style type="text/css">
body{backgrond-image:url(back.gif); background-repeat:no-repeat;
background-attachment:fixed;}
</style>
'Programming > HTML/CSS' 카테고리의 다른 글
| TABLE 넓이 고정하기 (0) | 2004.08.06 |
|---|---|
| TEXTBOX에 CSS 활용하기 (0) | 2004.08.06 |
| 글자에니메이션 - 마퀴(MARQUEE) (0) | 2004.06.27 |
| CSS를 활용해 간격조정하기 (0) | 2004.05.20 |
| HTML 에서의 엔터!!(줄바꿈) (0) | 2004.05.16 |
| 페이지 전체의 배경색 및 바탕화면 (0) | 2004.05.16 |
