JSFiddle - React, Tailwind, and code Playground

HTML

<p>원본 이미지<br />
    <img src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-ash3/p206x206/542653_10151455910494869_2005108641_n.jpg" />
</p>
<p>백그라운드 예제 </p>
<div class="div1"> 0% 0%</div>
<div class="div2"> 100% 100%</div>
<div class="div3"> 20% 80%</div>
<div class="div4">top left</div>
<div class="div5">top center</div>
<div class="div6"> top right</div>
<div class="div7"> left center</div>
<div class="div8"> center center</div>
<div class="div9"> center right</div>
<div class="div10">  bottom left</div>
<div class="div11"> bottom center</div>
<div class="div12"> right bottom</div>

CSS

div {
    width: 400px;
    height : 300px;
    margin: 2em;
    padding:2em;
    background-color: #666;
    background-repeat: no-repeat;
    color: white;
    float: left;
    background-image: url("https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-ash3/p206x206/542653_10151455910494869_2005108641_n.jpg");
}
.div1 {
    background-position: 0% 0%;
}
.div2 {
    background-position: 100% 100%;
}
.div3 {
    background-position: 20% 80%;
}
.div4 {
    background-position: top left;
}
.div5 {
    background-position: top center;
}
.div6 {
    background-position: top right;
}
.div7 {
    background-position: left center;
}
.div8 {
    background-position: center center;
}
.div9 {
    background-position: center right;
}
.div10 {
    background-position: bottom left;
}
.div11 {
    background-position: bottom center;
}
.div12 {
    background-position: right bottom;
}