본문 바로가기
CSS

CSS 배경이미지

by 샷타이거 2009. 9. 4.

배경이미지 지정

배경이미지지정은 아주쉽다 예제를 보자

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주었으니 그자리에 위치하게된다

또 그림위치값은 픽셀과 퍼센트값으로도 지정가능하다.

다음엔 텍스트를 필요한 그림으로 대체시키는 방법에 대해 알아보겠다.


댓글