<main>
<div>background-position: 0% 0%;</div>
<div>background-position: top;</div>
<div>background-position: bottom;</div>
<div>background-position: left;</div>
<div>background-position: right;</div>
<div>background-position: center;</div>
</main>
div {
width: 300px;
height: 200px;
background-color: pink;
background-image: url("https://via.placeholder.com/100x50");
background-repeat: no-repeat;
}
div:first-of-type {
background-position: 0% 0%; /* 기본값 */
}
div:nth-of-type(2) {
background-position: top;
}
div:nth-of-type(3) {
background-position: bottom;
}
div:nth-last-of-type(3) {
background-position: left;
}
div:nth-last-of-type(2) {
background-position: right;
}
div:last-of-type {
background-position: center;
}
main {
padding: 10px;
display:grid;
grid-gap: 10px;
grid-template-columns: repeat(2, 1fr);
place-items: center center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.