<div id="container">
  <h3>background-repeat</h3>
  <h4>space</h4>
  <div id="orange" class="block"></div>
  <h4>round</h4>
  <div id="blue" class="block"></div>
</div>
@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,400i,700");

/* Стили, относящиеся к данному примеру */

#orange {
  background-color: #FF9800;
  background-repeat: space;
}

#blue {
  background-color: #5C6BC0;
  background-repeat: round;
}

/* Остальные стили */

body {
  font-family: Inconsolata;
  background-color: #f5f5f5;
}

#container {
  padding: 16px 48px;
  width: 50%;
}

#orange {
  background-image: url('data:image/png;base64,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');
}

#blue {
  background-image: url('data:image/png;base64,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');
}

h3 {
  font-size: 24px;
  font-size: 20px;
  font-weight: bold;
  color: #39a1f4;
  padding: 16px;
  background: rgba(255,255,255,.9);
 }

h4 {
  font-size: 24px;
  font-weight: normal;
  line-height: 1;
  margin: 16px
}

.block {
  flex-grow: 1;
  min-width: 120px;
  height: 128px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  resize: both;
  overflow: auto;
  margin-bottom: 24px;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js