본문 바로가기

DHTML/CSS/META

CSS 배경이미지 표현방법

CSS 배경이미지 표현방법

<HTML>
<HEAD>
<TITLE> 배경그림 관련 속성 </TITLE>
<STYLE>
<!--
 body {background-image:url(images\bear.jpg);
     background-repeat:no-repeat;
       background-position:right top;
     font-size:15pt}
-->
</STYLE>
</HEAD>
<BODY>
background-position 속성이란?<P>

배경 그림을 지정할 때<BR>
특정 위치에 그림을 보여주고 싶을 경우
background-position 속성을 사용합니다.<P>
<BR><BR>
정렬위치에 따라<BR>
수평 방향의 위치는 left, center, right가 있고<BR>
수직 방향은 top, center, bottom이 있습니다.<P>

그 밖에 %로 위치를 지정할 수 있습니다.<P>
</BODY>
</HTML>


다른 적용의 예)


<STYLE>
<!--
 body {background-image:url(images\bear.jpg);
     background-repeat:no-repeat;
       background-position:80% 60%;
     font-size:15pt}
-->
</STYLE>


<STYLE>
<!--
 body {background-image:url(images\bear.jpg);
     background-attachment:scroll;
     font-size:20pt}
-->
</STYLE>


<STYLE>
<!--
 body {background-image:url(images\bear.jpg);
     background-attachment:fixed;
     font-size:20pt}
-->
</STYLE>


<STYLE>

<!--
 body {background-image:url(images\bg1.gif); background-repeat:no-repeat}
 P {font-size:15pt;}
-->
</STYLE>