배경이미지를 고정시켜 항상 제자리에 놔두기

배경이미지 고정 CSS

<style type="text/css">
BODY {
margin-left: 1em;                                          /* 고정 이미지가 보이도록 열어 준 것임 */
background-image: url('이미지경로/이미지');
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 => 하단 오른쪽....등으로 표현할수있다.

[예제응용] 

스타일시트를 사용하지 않고 바로 해당 테이블이나 <TD>에 적용할 경우는 아래와 같다.

<TD style='background-image:url(이미지경로/이미지.gif); background-repeat:no-repeat; background-position:bottom right; background-attachment:fixed;'></TD>

TAG CSS/HTML

웹 그래픽디자인

STUDY 2008/11/17 15:53 |

웹 그래픽디자인을 하면서 중요하게 생각하는 것들


근접성  Proximity

정렬  Alignment

반복  Repetition

대비  Contrast

타이포그래피  Typography


결국엔 디자인 절대요소인 타이포, 비주얼, 레이아웃은 어디에나 기본이 된다는 것이다.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MONONEMO</title>
</head>

<frameset rows="0,*" frameborder="no" border="0" framespacing="0">
  <frame src="no.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" />
  <frame src="intro.html" name="mainFrame" id="mainFrame" />
</frameset>
<noframes>

<body>
</body>
</noframes></html>



rows = "0,*"은 프레임을 상하고 나누는 것으로 보이지 않는 0 픽셀의 상단 프레임을 제외한 나머지 픽셀(*)로 보여진다.

사이트 주소창이 지저분해지는 것을 못마땅하게 생각하시는 분들은 사용하시길 추천합니다.

TAG html