Background-Position
개요 : 이 속성은 요소의 배경 이미지의 시작 위치를 지정한다.
이 속성은 배경 이미지 반복이 시작되는 지점이나, 반복되지 않으면 이미지 자체의 위치를 나타낸다. 백분율 값은 그 요소 내부의 저점뿐만
아니라, 원래 이미지 자체의 동일한 지점도 정의한다.
정의
|
background-position |
설명 |
|
값 |
<백분율> | <[ [length | 길이]]> ] | [ [top | center | bottom] [left | center | right] | inherit |
|
기본값 |
0% 0% |
|
적용대상 |
블럭레벨과 대체된 요소 |
|
상속 |
안됨 |
|
백분율 |
사용 불가 |
|
미디어 |
visual |
값
|
값 |
설명 |
|
<백분율> |
'백분율(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(%))
View Source :
<style>
p {
background-position: 10px 5px;
background-image: url(/docs/files/css/background/pattern_156.gif);
color:#fff;
height:100px;
}
</style>
<body>
<p>배경 이미지가 시작될 위치를 가로(x축) 10px 세로(y축) 5px로 지정합니다.</p>
</body>
Result :
View Source :
<style> p { background-position: 10px 5px; height:100px; } </style> <body> <p>배경 이미지의 경로를 지정하지 않으면, 배경 이미지가 시작할 수 없습니다.</p> </body>Result :
''.' Programs > CSS' 카테고리의 다른 글
| Background-Image (0) | 2012.03.20 |
|---|---|
| Background-Repeat (0) | 2012.03.20 |
| Background - Attachment (0) | 2012.03.20 |
| Background (0) | 2012.03.20 |
| Width (0) | 2012.03.20 |