5 메뉴 배경이미지 100% 설정하기

기본 메뉴 개념잡기>전체 화면 구성>배경색상 넣기에서 배경을 설정하는 방법은 3가지가 있으며, 이 중에서 가장 자연스럽고 간편한 방법인 스타일(style)을 이용한 배경이미지 설정방법에 대해서 살펴보도록 하겠습니다.

tip)배경이미지 설정 방법

① 전체 화면 구성의 배경 색상/이미지설정에서 배경이미지를 첨부하는 방법

② 전체 화면 구성의 구역별 배경설정에서 가로크기를 100%로 설정한 후, 상단디자인을 가로 100%인 테이블을 만들어 배경이미지를 넣는 방법

③ <style>을 이용하는 방법

(1) <style>을 이용한 배경설정하기

<STYLE TYPE="text/css"> BODY { background-image: url('/img_up/shop_pds/ushop009/design/main/main_top_bg1.gif'); background-repeat: repeat-x; background-position: bottom top; } </STYLE>

위 소스는 백그라운드스타일 속성입니다. 백그라운드 이미지의 위치와 반복구간, 그리고 백그라운드가 시작될 지점을 설정해 두었습니다. 이 스타일 소스는 상단, 왼쪽, 하단의 어느 위치든 상관없이 설정된 위치와 속성이 적용되는 장점이 있습니다. 필자는 위 소스를 [디자인 관리》메인 화면 디자인》상단 디자인] 웹디모 샵 상단에 삽입 하였습니다.

(2) 상단 디자인 결과물 보기

메인 기본 메뉴바의 백그라운드설정을 마지막으로 상단 디자인이 완료된 모습입니다.