Background-repeat 편집

Table of Contents (보이기↓)

edit

개요

이 속성은 요소의 배경 이미지가 반복되는 방향을 지정한다. 이러한 반복의 시작은 background-position 값으로 정한다.

edit

정의

정의설명
값repeat | repeat-x | repeat-y | no-repeat | inherit
기본값repeat
적용대상모든 요소
상속안됨
백분율사용 불가
미디어visual

edit

값

값설명
repeat수평과 수직으로 반복된다.
repeat-x수평으로 반복된다.
repeat-y수직으로 반복된다.
no-repeat반복하지 않고 한개의 이미지만 나타난다.
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-repeat: no-repeat;
	background-image: url(/docs/files/Css/Background/pattern_156.gif);
	color:#f00;
	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-repeat: repeat-x;
	background-image: url(/docs/files/Css/Background/pattern_156.gif);
	color:#f00;
	height:100px;
	}	
</style>
</head>
<body>
	<p>배경 이미지가 가로(x축) 방향으로 반복되도록 지정합니다.</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-repeat: repeat-y;
	background-image: url(/docs/files/Css/Background/pattern_156.gif);
	color:#f00;
	height:100px;
	}	
</style>
</head>
<body>
	<p>배경 이미지가 세로(y축) 방향으로 반복되도록 지정합니다.</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:#f00;
	height:100px;
	}	
</style>
</head>
<body>
	<p>배경 이미지 반복을 지정하지 않으면, 가로/세로 방향으로 타일처럼 반복됩니다.</p>
</body>
</html>

edit

브라우저 호환성

값IE6?IE7?FF2?Op9?
repeat지원지원지원지원
repeat-x지원지원지원지원
repeat-y지원지원지원지원
no-repeat지원지원지원지원
inherit미지원미지원지원지원

Wiki Trail: < background-image | 문서 목록 | background-position >

 
Be Friend~! Be Friend~!