JSFiddle - React, Tailwind, and code Playground

by tomik23

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <div class="bg-content-wrapper"></div>
  <h1></h1>

CSS

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

h1 {
  position: absolute;
  z-index: 1;
  top: 0;
  margin: auto;
}

.bg-content-wrapper {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  overflow: hidden;
  background-image: url("https://thumbs.dreamstime.com/z/portrait-9651305.jpg");
  margin: 0;
}

JavaScript

function setHeight() {
  const wrapper = document.querySelector('.bg-content-wrapper');
  const h1 = document.querySelector('h1');

  windowHeight = document.documentElement.clientHeight;
  windowWidth = document.documentElement.clientWidth;
  wrapper.setAttribute('style', 'height: ' + windowHeight + 'px');
  h1.innerHTML = 'height: '+ windowHeight + '<br> width: ' + windowWidth + '';

  // alert(windowHeight);
}

setHeight();
window.addEventListener('resize', setHeight);