Background-image 편집

Table of Contents (보이기↓)

edit

개요

이 속성은 요소의 배경 이미지를 지정한다.

background-repeat 값에 따라 배경 이미지는 무한히 반복되거나, 어떤 한 축에 대해서 반복되거나, 또는 전혀 반복되지 않는다. 이러한 반복의 시작은 background-position 값으로 정한다.

edit

정의

Background-image설명
값<uri?> | none | inherit
기본값none
적용대상모든 요소
상속안됨
백분율사용 불가
미디어visual

edit

값

값설명
uri경로를 지정한다.
none배경이미지를 지정하지 않는다.
inherit부모 요소의 값을 상속하도록 지정한다.

edit

예제

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
	p {
	background-image: url(http://hooney.net/docs/files/Css/Background/pattern_156.gif);
	color:#fff;
	height:100px;
	}	
</style>
</head>
<body>
	<p>배경 이미지의 절대 경로를 지정합니다.</p>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
	p {
	background-image: url(docs/files/Css/Background/pattern_156.gif);
	color:#fff;
	height:100px;
	}	
</style>
</head>
<body>
	<p>배경 이미지의 상대 경로를 지정합니다.</p>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
	p {
	background-image: url(docs/files/Css/Background/pattern_156.gif);
	background-color: #000;
	color:#fff;
	height:100px;
	}	
</style>
</head>
<body>
	<p>배경 이미지를 다운받을 수 없는 경우를 대비하여, 배경 색상과 함께 지정하는 것이 좋습니다.</p>
</body>
</html>

edit

브라우저 호환성

값IE6?IE7?FF2?Op9?
(URI)지원지원지원지원
none지원지원지원지원
inherit미지원미지원지원지원

Wiki Trail: < background-color | 문서 목록 | background-repeat >

 
Be Friend~! Be Friend~!