JSFiddle - React, Tailwind, and code Playground

by yudizsolutions

HTML

<body>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the...

CSS

body {
    background: url('http://www.jquery-az.com/html/images/banana.jpg') no-repeat center center / cover;
    color: #fff;
    width: 100%;
    height: 100%;
    min-height: 600px;
    display: block;
    transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
}

JavaScript

$( document ).ready(function() {
  $(window).scroll(function() {
    $('body').css('background-position', 'center ' + $(window).scrollTop() + 'px');
  });
});