<div id="root">
  Background text
  <div class="content">
    Hello World!
  </div>
  Background text
</div>
#root {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.content {
  background-color: white;
  border-style: solid;
  width: 160px;
  height: 60px;
  text-align: center;
  line-height: 4em;
  z-index: 0;
}

.veil {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
  opacity: 0.8;
}
const root = document.querySelector(".content");
root.insertAdjacentHTML(
  "beforebegin",
  `<div class="veil"></div>`
);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.