bakcground-position

default
top
left
bakcground-position

default
top
left
bakcground-position

default
top
left
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
	# background-position
	- 배경 이미지의 위치를 지정.
	- background-position : 키워드 
	- background-position : x좌표
	- background-position : x좌표, y좌표
-->
<style type="text/css">
div {
	width: 300px;
	height: 300px;
	margin: 0 10px 10px 0;
	background-image: url('../../image/bg_image/dot_blue.gif');
	background-color: coral;
	background-repeat: no-repeat;
	display: inline-block;
}
.top { background-position: top; }
.left { background-position: left; }
.right { background-position: right; }
.bottom { background-position: bottom; }
.point_x { background-position: 50px; }
.point_xy { background-position: 100px 200px; }
.img_two {
	background-image: url('../../image/bg_image/dot_blue.gif'), url('../../image/bg_image/yellow_bg.jpg');
	background-position: 0px 50px, center;
}

</style>
</head>
<body>
	<h1>bakcground-position</h1>
	<br>
	<div class="default"> default </div>
	<div class="top"> top </div>
	<div class="left"> left </div>
	<div class="right"> right </div>
	<div class="bottom"> bottom </div>
	<div class="point_x"> 50px </div>
	<div class="point_xy"> 100px 200px </div>
	<div class="img_two"> image 2개 </div>
</body>
</html>