CSS / background-position / 배경 이미지의 위치를 정하는 속성
개요
background-position은 배경 이미지의 위치를 정하는 속성입니다.
- 기본값 : 0% 0%
- 상속 : No
- 애니메이션 : Yes
- 버전 : CSS Level 1
문법
|
1 |
background-position: x-position y-position | initial | inherit |
- x-position y-position : 가로 위치와 세로 위치를 정합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
위치 값으로 사용할 수 있는 것은 다음과 같습니다.
- 가로 위치 값 : left, center, right, 백분율, 길이
- 세로 위치 값 : top, center, bottom, 백분율, 길이
예제
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { width: 100%; height: 600px; border: 1px solid #bcbcbc; } .a { background-image: url( "images/bg-gray.png" ); background-repeat: no-repeat; background-position: 10% 100px; } </style> </head> <body> <div class="a"> </div> </body> </html> |
브라우저 지원
- Chrome : 1.0+
- Firefox : 1.0+
- Internet Explorer : 4.0+
- Opera : 3.5+
- Safari : 1.0+