배경이미지의 위치 지정

Keyword

두 개로 이루어진 키워드를 사용할 수 있다. 하나는 세가지 가로위치 ( left, center, right ) 를 조정하고, 다른 하나는 세가지 세로 위치 ( top, center, right ) 를 조정하는 것이다. 이미지를 페이지의 정 중앙에 위치시키고자 한다면 다음과 같이 작성하면된다

• body
• {
• background-image : url (bg_page.jpg);
• background-repeat : no-repeat;
• background-position : center center;
• }

그 이미지를 오른쪽 상단 귀퉁이로 옮기려면, background-position 을 다음과 같이 바꾸어 주면 된다

background-position : right top ;

Note : 만약 background-repeat 를 앞 섹션에서 나열한 값중 하나로 지정해서 이미지를 타일화 할 경우 background-position 프로퍼티는 첫번째 타일의 시작 위치만을 제어한다. 따라서 만일 반복 옵션을 사용하면 여전히 전체 배경이 이미지로 가득차게 된다. background-position에 지정한 값에 따라 첫번째 타일의 위치만 바뀔뿐이다

키워드는 세로나 가로 배너를 제작할 경우에 정말로 유용하다. 그림을 페이지 중앙에 두고 그림과 내용의 배경을 생성하기 위해 아래쪽으로 타일화 하려면 다음과 같이 스타일을 작성하면 된다

• body
• {
• background-image : url(background.jpg);
• background-repeat : repeat - y;
• background-position : center top;
• }

마찬가지로 bottom, center, top 키워드를 사용하여 repeat-x 에 의해 가로로 반복되는 이미지를 특정위치에 배치할수 있다.

브라우저 버그 - 파이어 폭스에서 바닥을 잘못 인식하는 현상

웹페이지의 배경에 이미지를 표시할 경우, 파이어 폭스는 이미지를 항상 개발자의 의도대로 세로로 배치하지는 않는다. 예를 들어 세로 position 을 bottom 으로 지정할 경우 이미지가 브라우저 바닥에 항상 나타나지는 않는다. 이 현상은 페이지 내용이 브라우저 창의 높이에 비해 짧을 경우에 발생한다. 단지 몇줄의 텍스트 단락만으로 이루어진 웹페이지를 굉장히 큰 모니터에서 본다면, 파이어 폭스는 "바닥" 을 브라우저 창 하단이 아닌 마지막 단락의 하단을 "바닥" 으로 인식한다. 이런 경우 스타일 시트에 html { height: 100%; } 를 추가만 하면 된다