background-image Property

Home > Document > CSS > Background > background-image

background-image Property

background-image Property 는 HTML Attribute 중에 backgroud처럼 문서나 면적이 있는 Element의 배경그림을 지정하는 Property입니다. 사용법은 앞의 list-style-image와 동일합니다. 즉,

{ backgroudn-image : url("경로/그림파일이름") }

과 같이 사용합니다. 실습에 사용할 파일은 여기를 우클릭하여 '다른 이름으로 그림 저장' 메뉴로 Myfolder/images 폴더에 복사하고 새 파일을 시작하여 Myfolder/html 폴더에 backgroudn_image.html 로 이름을 주고 저장합니다. 그림파일 이름은 'fall.jpg' ...

  [표 보는 방법]
background-image Property
Value <uri> | none | Inherit
Initial none
Applies to all elements
Inherited no
Percentages N/A
Media Visual
HTML Syntax { background-image: sImage }
Scripting object.style.backgroundImage [ = sImage ]



CSS Scripting
onMouseDown="this.style.backgroundImage='../images/bg_pattern.gif';"

입력 
<HTML>
    <HEAD>
        <TITLE>BODY에 배경 그림 넣기</TITLE>
    </HEAD>
    <BODY style="background-image : url(../images/fall.jpg);">
        <SPAN style="color:#FFFFFF;">BODY에 배경 그림 넣기</SPAN>
              <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
              <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
              <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    </BODY>
</HTML>
출력결과
BODY에 배경 그림 넣기









































위와 같이 지정한 배경 그림이 background-image로 나오고 아래 위로 scroll을 하게 되면 배경 그림이 반복해서 나오게 됩니다. 배경 그림을 고정 시키고 싶을 경우, 뒤에 나오는 backgroudn-attachment Property를 사용하게 됩니다. 이 때 한가지 유의해야 할 것은 이 그림처럼 색상이 다채로운 경우 그림 위에 얹혀지게 되는 글씨의 색깔이 배경과 범벅이 되어 잘 안 보이게 될 경우입니다. 물론 이런 그림을 배경으로 글씨를 쓰는 경우는 드물지만, 단색의 배경 그림을 사용하는 경우도 이 점을 고려해야 되겠죠...



이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색