div {
height: 100px;
width: 100px;
background-image :url('http://ezcode.kr/study/css/img/smile.png');
background-repeat: no-repeat;
border:1px solid black;
}
.ex1 {
background-position: right bottom;
}
.ex2 {
background-position: center;
}
.ex3 {
background-position: 20px 40px;
}
.ex4 {
background-position: -15px 50%;
}
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body>
<h1>background-position</h1>
<p>background-position: right bottom;</p>
<div class="ex1"></div>
<hr>
<p>background-position: center center;</p>
<div class="ex2"></div>
<hr>
<p>background-position: 20px 40px</p>
<div class="ex3"></div>
<hr>
<p>background-position: -15px 50%;</p>
<div class="ex4"></div>
</body>
</html>