테스트 사이트 - 개발 중인 베타 버전입니다

스타일시트를 이용한 배경이미지 제어

· 19년 전 · 1846
배경이미지는 가로, 세로로 무한히 반복되어 나타납니다. 이런 효과때문에 홈페이지를 만들때 때로는 많은 불편을 가져오기도 합니다.

이런 불편함을 요즘에 많이 사용하는 스타일시트를 이용하여 간단히 제어할 수 있는데 아직 넷스케이프와 익스플로러에서 스타일시트 문법 통일이 이루어지지 않아 서로 호환이 안되는 스타일시트도 있지만 홈페이지를 만드는데 상당히 많은 도움을 줄 것 같습니다.

설치법은 다음에 설명할 스타일시트 태그를 </TITLE>태그와 </HEAD>사이에 넣으면 간단히 설치가 됩니다.

◈ 배경이미지 무반복
<style type="text/css">
body {background-image:url(배경이미지 파일경로); background-repeat:no-repeat}
</style>

◈ 배경이미지 가로만 반복
<style type="text/css">
body {background-image:url(배경이미지 파일경로); background-repeat:repeat-x}
</style>

◈ 배경이미지 세로만 반복
<style type="text/css">
body {background-image:url(배경이미지 파일경로); background-repeat:repeat-y}
</style>

◈ 배경이미지 특정위치에 놓기(주의 : 넷스케이프 지원안함)

스타일시트 태그는 배경이미지를 반복하지 않고 중앙에 배경이미지 하나만을 위치시키도록 하는 스타일시트 태그입니다. 여기서 위의 스타일시트 태그의 no, x, y, 50%등을 응용하면 배경이미지를 자유자재로 위치시킬수 있습니다.

<style type="text/css">
body {background-image:url(배경이미지 파일경로); background-repeat:no-repeat}
background-attachment : fixed; background-position : 50% 50%}
</style><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
9186
9168
9167
28537
9163
28532
9160
9155
Flash wmode 4
28530
9150
9144
28529
9143
9141
9138
28523
9132
28521
9131
9130
9129
28517
9126
28515
9123
9122
9119
9118
9114
9111
28514
9109
9108
9105
9100
9097
9096
9093
9089
9083
28511
9081
9077
9073
9070
28510
9069
9068
9067
9065
9064
9063
9061
9060
9059
28509
9058
9057
9056
28508
9055
9054
28507
9053
9052
9051
9050
9049
9048
9038
9033
9032
9031
9029
9026
9024
9023
9022
9017
9015
28502
9013
9001
8998
8994
8993
8992
8989
8988
8987
8981
8978
8974
8973
8971
8970
8963
8959
8953
8950