JSFiddle - React, Tailwind, and code Playground

HTML

<div id="background-image"
    style="background-image: url('background.jpg');" >
        <div class="container">
            wii jlkjkljkl fjkl jlkfsjlkfj klsajfkl sajkl jfklasj kfjsakl jlkfajs klfjlkasj fklasj klfjsakl lkfas
        </div>
     </div>

CSS

#background-image {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    background-color:red;
     display: flex;
  justify-content: center;
  align-items: center;
    height: 100vh;
}

.container {
  background-color:green;
  padding-top: auto;
  padding-bottom: auto;
}