Background-Image
개요 : 이 속성은 요소의 배경 이미지를 지정한다. 배경 이미지의 경로는 절대 경로와 상대 경로를 사용할 수 있다.
- 절대 경로 :(http://site.url)/path/image.gif - (http://site.url)은 생략 가능
- 상대 경로 : path/image.gif
background-repeat 값에 따라 배경 이미지는 무한히 반복되거나, 어떤 한 축에 대해서 반복되거나, 또는 전혀 반복되지 않는다.
이러한 반복의 시작은 background-position 값으로 정한다.
정의
|
backgound-image |
설명 |
|
값 |
<url> | none | inherit |
|
기본값 |
none |
|
적용대상 |
모든 요소 |
|
상속 |
안됨 |
|
백분율 |
사용 불가 |
|
미디어 |
visual |
값
|
값 |
설명 |
|
url |
경로를 지정한다. |
|
none |
배경이미지를 지정하지 않는다. |
|
inherit |
부모 요소의 값을 상속하도록 지정한다. |
View Source:
<style>
p {
background-image: url(http://hooney.net/docs/files/css/background/pattern_156.gif);
color:#fff;
height:100px;
}
</style>
<body>
<p>배경 이미지의 절대 경로를 지정합니다.</p>
</body>
Result :
View Source :
<style> p { background-image: url(/docs/files/css/background/pattern_156.gif); color:#fff; height:100px; } </style> <body> <p>배경 이미지의 상대 경로를 지정합니다.</p> </body>Result :View Source :<style> p { background-image: url(/docs/files/css/background/pattern_156.gif); background-color: #000; color:#fff; height:100px; } </style> <body> <p>배경 이미지를 다운받을 수 없는 경우를 대비하여, 배경 색상과 함께 지정하는 것이 좋습니다.</p> </body>Result :
''.' Programs > CSS' 카테고리의 다른 글
| Color (0) | 2012.03.20 |
|---|---|
| Background-Color (0) | 2012.03.20 |
| Background-Repeat (0) | 2012.03.20 |
| Background-Position (0) | 2012.03.20 |
| Background - Attachment (0) | 2012.03.20 |