<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.