background-position 속성

개요

일반적으로 background-image 는 왼쪽 위부터 이미지를 출력한다. 이때 background-position 속성을 사용하면 이미지의 좌표를 수정 할 수 있다.

margin/padding에서 지정했던 것과 비슷하게 띄어쓰기를 기준으로 x좌표, y좌표를 지정한다.

픽셀 뿐만 아니라 left, top, center, bottom, right 등의 상수도 쓸 수 있다.

사용법

#box{ background-position:-50px -100px }

예제

<html>
<head>
	<style>
		.box{ width:300px; height:100px; margin-bottom:10px; background-image:url('android.jpg'); border:1px solid #AAA}
		#box1{ background-position:center center; background-repeat: no-repeat }
		#box2{ background-position:30px right; background-repeat: repeat }
		#box3{ background-position:-100px -60px; background-repeat: repeat-x }
		#box4{ background-position:40px -90px; background-repeat: repeat-y }
	</style>
</head>
<body>
	<div id="box1" class="box"></div>
	<div id="box2" class="box"></div>
	<div id="box3" class="box"></div>
	<div id="box4" class="box"></div>
</body>
</html>
출력 결과:

추가 : 이미지 스프라이트

여러 가지의 이미지를 동적으로 사용하거나 작은 이미지들을 처리할 때 여러개의 이미지들을 합쳐 하나의 이미지로 만든 후 필요한 객체마다 background-position 속성으로 이미지 위치를 바꿔 다른 이미지를 사용한 것 처럼 보이게 하는데 이를 이미지 스프라이트라 한다.

이미지의 이러한 사용은 웹 사이트 로딩 시간을 단축 시킬 뿐더러, :hover, :active 등 가상 선택자로 이미지를 바꿀시 이미지 로딩으로 인한 끊김 현상이 나타나지 않는다

이때 유의해야 할 점은 x좌표가 100px인 부분의 이미지를 잘라 쓰려면 음수를 붙여 -100px 처럼 써야 한다는 것이다. 이는 이미지의 좌표를 왼쪽으로 당겨야 오른쪽 부분이 보이기 때문이다. (마스크 효과라고 보면 됨)

스프라이트 적용 예 :

예제

<html>
<head>
	<style>
		#sprite-btn{ width:52px; height:40px; background-image:url(search_sprite.png); border:none }
		#sprite-btn:hover{ background-position: -60px 0px }
		#sprite-btn:active{ background-position: -120px 0px }
	</style>
</head>
<body>
	<button id="sprite-btn"></button>
</body>
</html>
출력 결과: