TD뿐만 아니라 BODY값에서도 적용가능하며, 배경이미지를 고정시켜 항상 제자리에 있는 느낌을 주게 하는 팁앤테크~
------------------------------------
## 배경이미지 고정 스타일시트 정의 ##
------------------------------------
<style type="text/css">
BODY {
margin-left: 1em; /* 고정 이미지가 보이도록 열어 준 것임 */
background-image: url('http://trio.co.kr/gif/bnvtrio.gif');
background-position: 260 left; /* 디폴트는 top left, 혹은 0 0 */
background-attachment: fixed;
background-repeat: no-repeat; /* 디폴트는 repeat */
}
</style>
## background=position 의 값을 어떻게 주느냐에 따라 배경이미지의 위치가 달라진다.
## 0 0 => 왼쪽 상단 , bottom 0 => 하단 왼쪽, bottom right => 하단 오른쪽....등으로 표현할수있다.
[예제응용]
1. 스타일시트를 사용하지 않고 바로 해당 테이블이나 <TD>에 적용할 경우는 아래와 같다.
<TD style='background-image:url(이미지경로/이미지.gif); background-repeat:no-repeat; background-position:bottom right; background-attachment:fixed;'></TD><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>
------------------------------------
## 배경이미지 고정 스타일시트 정의 ##
------------------------------------
<style type="text/css">
BODY {
margin-left: 1em; /* 고정 이미지가 보이도록 열어 준 것임 */
background-image: url('http://trio.co.kr/gif/bnvtrio.gif');
background-position: 260 left; /* 디폴트는 top left, 혹은 0 0 */
background-attachment: fixed;
background-repeat: no-repeat; /* 디폴트는 repeat */
}
</style>
## background=position 의 값을 어떻게 주느냐에 따라 배경이미지의 위치가 달라진다.
## 0 0 => 왼쪽 상단 , bottom 0 => 하단 왼쪽, bottom right => 하단 오른쪽....등으로 표현할수있다.
[예제응용]
1. 스타일시트를 사용하지 않고 바로 해당 테이블이나 <TD>에 적용할 경우는 아래와 같다.
<TD style='background-image:url(이미지경로/이미지.gif); background-repeat:no-repeat; background-position:bottom right; background-attachment:fixed;'></TD><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>
댓글 2개
Photofly
19년 전
좋은 팁이군요...감사합니다...
19년 전
좋네요^^
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 630 | 19년 전 | 2336 | ||
| 629 |
 ⓦangcho |
19년 전 | 1998 | |
| 628 |
ⓦangcho |
19년 전 | 3111 | |
| 627 |
ⓦangcho |
19년 전 | 2017 | |
| 626 |
ⓦangcho |
19년 전 | 2061 | |
| 625 |
ⓦangcho |
19년 전 | 1709 | |
| 624 |
ⓦangcho |
19년 전 | 2209 | |
| 623 | 19년 전 | 2187 | ||
| 622 |
 뜨락의이름 |
19년 전 | 2497 | |
| 621 |
ⓦangcho |
19년 전 | 2886 | |
| 620 |
ⓦangcho |
19년 전 | 2392 | |
| 619 | 19년 전 | 2457 | ||
| 618 | 19년 전 | 3504 | ||
| 617 |
 Elbis |
19년 전 | 3225 | |
| 616 |
Elbis |
19년 전 | 3214 | |
| 615 |
Elbis |
19년 전 | 3024 | |
| 614 |
Elbis |
19년 전 | 2036 | |
| 613 |
Elbis |
19년 전 | 2362 | |
| 612 |
Elbis |
19년 전 | 2228 | |
| 611 |
Elbis |
19년 전 | 2072 | |
| 610 |
Elbis |
19년 전 | 2507 | |
| 609 |
Elbis |
19년 전 | 2415 | |
| 608 |
Elbis |
19년 전 | 2803 | |
| 607 | 19년 전 | 2183 | ||
| 606 | 19년 전 | 3510 | ||
| 605 | 19년 전 | 1978 | ||
| 604 | 19년 전 | 2580 | ||
| 603 | 19년 전 | 1604 | ||
| 602 |
 Dream |
19년 전 | 2830 | |
| 601 | 19년 전 | 3069 | ||
| 600 |
 빨간망토의비밀 |
19년 전 | 2152 | |
| 599 | 19년 전 | 1992 | ||
| 598 | 19년 전 | 2470 | ||
| 597 | 19년 전 | 2383 | ||
| 596 |
ⓦangcho |
19년 전 | 3068 | |
| 595 |
ⓦangcho |
19년 전 | 6746 | |
| 594 | 19년 전 | 2703 | ||
| 593 | 19년 전 | 3182 | ||
| 592 |
 damoa.biz |
19년 전 | 3080 | |
| 591 |
ⓦangcho |
19년 전 | 1921 | |
| 590 | 19년 전 | 3360 | ||
| 589 | 19년 전 | 2201 | ||
| 588 |
ⓦangcho |
19년 전 | 2700 | |
| 587 | 19년 전 | 2342 | ||
| 586 |
 cunic |
19년 전 | 4353 | |
| 585 | 19년 전 | 2476 | ||
| 584 | 19년 전 | 2745 | ||
| 583 |
ⓦangcho |
19년 전 | 3509 | |
| 582 |
ⓦangcho |
19년 전 | 3709 | |
| 581 |
ⓦangcho |
19년 전 | 3240 | |
| 580 | 19년 전 | 2471 | ||
| 579 | 19년 전 | 3053 | ||
| 578 | 19년 전 | 3943 | ||
| 577 | 19년 전 | 3791 | ||
| 576 | 19년 전 | 1732 | ||
| 575 |
ⓦangcho |
19년 전 | 2197 | |
| 574 |
 happycommunity |
19년 전 | 5399 | |
| 573 | 19년 전 | 6704 | ||
| 572 | 19년 전 | 2555 | ||
| 571 | 19년 전 | 2101 | ||
| 570 | 19년 전 | 2598 | ||
| 569 | 19년 전 | 3285 | ||
| 568 | 19년 전 | 3512 | ||
| 567 | 19년 전 | 2979 | ||
| 566 | 19년 전 | 2590 | ||
| 565 |
ⓦangcho |
19년 전 | 4708 | |
| 564 |
ⓦangcho |
19년 전 | 6718 | |
| 563 |
ⓦangcho |
19년 전 | 4984 | |
| 562 |
ⓦangcho |
19년 전 | 5939 | |
| 561 |
ⓦangcho |
19년 전 | 2678 | |
| 560 |
ⓦangcho |
19년 전 | 2520 | |
| 559 |
ⓦangcho |
19년 전 | 2212 | |
| 558 |
ⓦangcho |
19년 전 | 2291 | |
| 557 | 19년 전 | 4588 | ||
| 556 |
 Photofly |
19년 전 | 4654 | |
| 555 | 19년 전 | 2494 | ||
| 554 | 19년 전 | 2169 | ||
| 553 | 19년 전 | 2508 | ||
| 552 |
Photofly |
19년 전 | 3144 | |
| 551 | 19년 전 | 2929 | ||
| 550 |
Elbis |
19년 전 | 1886 | |
| 549 |
Elbis |
19년 전 | 1949 | |
| 548 |
Elbis |
19년 전 | 3137 | |
| 547 |
Elbis |
19년 전 | 2355 | |
| 546 |
Elbis |
19년 전 | 3609 | |
| 545 |
Elbis |
19년 전 | 2536 | |
| 544 |
Elbis |
19년 전 | 1844 | |
| 543 |
Elbis |
19년 전 | 2448 | |
| 542 |
Elbis |
19년 전 | 1716 | |
| 541 |
Elbis |
19년 전 | 1399 | |
| 540 |
Elbis |
19년 전 | 1526 | |
| 539 |
Elbis |
19년 전 | 1792 | |
| 538 |
Elbis |
19년 전 | 1571 | |
| 537 |
Elbis |
19년 전 | 1769 | |
| 536 |
Elbis |
19년 전 | 1554 | |
| 535 |
Elbis |
19년 전 | 1953 | |
| 534 |
Elbis |
19년 전 | 1839 | |
| 533 |
Elbis |
19년 전 | 1434 | |
| 532 |
Elbis |
19년 전 | 1436 | |
| 531 |
Elbis |
19년 전 | 1349 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기