<div class="container">
  <div class="center"><span class="material-icons">
self_improvement
</span></div>
</div>
/* Стили, относящиеся к этому примеру */
.container {
  position: relative;
  width: 80%;
  height: 300px;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Остальные стили */
.container {
  margin: 24px auto;
  background: #2196f3;
  background-image: url('https://images.unsplash.com/photo-1503494201477-5e04f651cfe5?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ');
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: screen;
  resize: both;
  overflow: auto;
}

span.material-icons {
  font-size: 240px;
  color: rgba(255,255,255,.8)
}

External CSS

  1. https://fonts.googleapis.com/css2?family=Roboto:wght@300&amp;display=swap
  2. https://fonts.googleapis.com/icon?family=Material+Icons

External JavaScript

This Pen doesn't use any external JavaScript resources.