Background-position 편집

Table of Contents (보이기↓)

edit

개요

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

이 속성은 배경의 반복이 시작되는 지점이나, 반복되지 않으면 이미지 자체의 위치를 나타낸다. 백분율 값은 그 요소 내부의 저점뿐만 아니라, 원래 이미지 자체의 동일한 지점도 정의한다.

edit

정의

Background-position설명
값<백분율> | <[ [length | 길이]]> ] | [ [top | center | bottom] [left | center | right] | inherit
기본값0% 0%
적용대상블럭레벨과 대체된 요소?
상속안됨
백분율사용 불가
미디어visual

edit

값

값설명
<백분율>'백분율(x축) 백분율(y축)' 쌍으로 수평(x축) 위치와 수직(y축) 위치를 지정한다.
<길이>'길이(x축) 길이(y축)' 쌍으로 수평(x축) 위치와 수직(y축) 위치를 지정한다.
top left, left top맨위 왼쪽으로 지정한다. '0(%) 0(%)'와 같음.
top, top center, center top맨위 중앙으로 지정한다. '50(%) 0(%)'와 같음.
right top, top right맨위 중앙으로 지정한다. '100(%) 0(%)'와 같음.
left, left center, center left왼쪽 중앙으로 지정한다. '0(%) 50(%)'와 같음.
center, center center중앙 중앙으로 지정한다. '50(%) 50(%)'와 같음.
right, right center, center right오른쪽 중앙으로 지정한다. '100(%) 50(%)'와 같음.
bottom left, left bottom바닥 왼쪽으로 지정한다. '0(%) 100(%)'와 같음.
bottom, bottom center, center bottom바닥 중앙으로 지정한다. '50(%) 100(%)'와 같음.
bottom right와 right bottom바닥 오른쪽으로 지정한다. '100(%) 100(%)'와 같음.
inherit부모 요소의 값을 상속하도록 지정한다.
  • 두 값을 지정하면, 수평 위치가 먼저 지정되고 수직 위치가 다음에 지정된다.
  • 하나의 백분율이나 길이 값이 지정하면, 이는 수평 위치가 되고 수직 위치는 50(%)가 된다.
  • 길이와 백분율 값을 조합할 수 있다. (예: 0 100(%), 50(%) 2em)
  • 키워드는 길이와 백분율 값과 조합할 수 없다. (예: top 50(%))

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-position: 10px 5px;
	background-image: url(/docs/files/Css/Background/pattern_156.gif);
	color:#fff;
	height:100px;
	}	
</style>
</head>
<body>
	<p>배경 이미지가 시작될 위치를 가로(x축) 10px 세로(y축) 5px로 지정합니다.</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-position: 10px 5px;
	height:100px;
	}	
</style>
</head>
<body>
	<p>배경 이미지의 경로를 지정하지 않으면, 배경 이미지가 시작할 수 없습니다.</p>
</body>
</html>

edit

브라우저 호환성

값IE6IE7FF2Op9
(Percentage)불안정불안정지원지원
(Length)불안정불안정지원지원
left불안정불안정지원지원
center (horizontal)불안정불안정지원지원
right불안정불안정지원지원
top불안정불안정지원지원
center (vertical)불안정불안정지원지원
bottom불안정불안정지원지원
inherit미지원미지원지원지원

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

 
Be Friend~! Be Friend~!