<h1>backgroundの比較</h1>
<div class="box">
<div class="repeat">
<h2>background-repeat: repeat;</h2>
<div class="img"></div>
</div>
<div class="round">
<h2>background-repeat: round;</h2>
<div class="img"></div>
</div>
</div>
.box {
display: flex;
justify-content: space-between;
div {
flex: 0 0 48%;
height: 200px;
.img {
background-image: url(https://sakuyasan.net/wp-content/uploads/2020/06/731483-e1593084976481.jpg);
}
&.repeat {
.img {
background-repeat: repeat;
}
}
&.round {
.img {
background-repeat: round;
}
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.