<div class="msg">
  <textarea class="msg__textarea"></textarea>
</div>
body {
  margin: 0;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  min-height: 100vh;
}

.msg {
  position: relative;
  z-index: 0;
  max-width: 600px;
  width: 100%;
}
/* 
.msg:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 10;
  background-image: linear-gradient(
    0deg,
    #b2a2cd 2.38%,
    transparent 2.38%,
    transparent 50%,
    #b2a2cd 50%,
    #b2a2cd 52.38%,
    transparent 52.38%,
    transparent 100%
  );
  background-size: 80px 80px;
  pointer-events: none;
} */

.msg__textarea {
  width: 100%;
  height: 170px;
  border: 0;
  box-sizing: border-box;
  padding: 10px 0;
  line-height: 40px;
  overflow: hidden;
  resize: none;
  background-image: linear-gradient(
    0deg,
    #b2a2cd 2.38%,
    transparent 2.38%,
    transparent 50%,
    #b2a2cd 50%,
    #b2a2cd 52.38%,
    transparent 52.38%,
    transparent 100%
  );
  background-size: 80px 80px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.