배경이미지 지정
배경이미지지정은 아주쉽다 예제를 보자
body{ background: url(image.gif); }
위의 CSS는 배경을 image.gif 파일로 지정한경우이다. 이외 상세히 지정할때 속성값들을 자세히보면 다음과 같다
- url() 백그라운드로 잡을 이미지이름,위치
- #FFF 색깔
- repeat 그림의 반복 배치, repeat-x(가로보 그림을 반복배치), repeat-y(세로로 그림 반복배치), no-repeat(박복없이배치)
- 배치한 그림의 위치 left,centerright....
적용된예를보자
#id{ background:transparent url(http://cfs.tistory.com/www/resource/images/login_bg.gif) repeat scroll 0 0 }
티스토리의 로그인화면의 예제이다. 아이디 지정 그리고 백그라운드 이미지의 주소를 볼수있다.
이미지위치지정에 대해 마지막으로 보자
위그림처럼 h1태그에 에드라인이라고 적고 그앞에 이미지를 배치할 수 있도록할것이다.
h1{ padding-left:30px; background: url(헤드라인.gif) no-reapeat left center; }
마지막에 left(가로) center(세로) 라고 준것만큼 그림의위치가 결정된다 패딩을 30px주었으니 그자리에 위치하게된다
또 그림위치값은 픽셀과 퍼센트값으로도 지정가능하다.
다음엔 텍스트를 필요한 그림으로 대체시키는 방법에 대해 알아보겠다.
댓글