STAHP IT

button to turn off backgrounds -- for whatever reason ...

by Rynne Cowham

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="page custom-background" width="100%">
  Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum
  dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem
  ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum
  Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum Lorem ipsum dolorum
</div>

<button class="stahp">
  STOP IT!
</button>

CSS

.custom-background {
  background: url('https://i.gifer.com/GQzS.gif'); background-position: center; background-size: cover; 
}
.page {
  color: #fff; font-family: arial, sans-serif; margin:0; padding:20px; 
}
.background-off {
  background-color: #303030; background-image:none !important;
}
.stahp {
  background-color: #241daf;
  border-radius: 6px;
  color: #fff;
  font-size: 18px;
  line-height: 1.5;
  margin: 15px 0;
  outline: none !important;
  padding: 0 10px;
}

JavaScript

$(document).ready(function() {
  $('.stahp').on("click", function() {
    if (!$('.page').hasClass('background-off')) {
      $('.page').addClass('background-off');
      $('.stahp').html("START AGAIN");
    } else {
      $('.page').removeClass('background-off');
      $('.stahp').html("STOP IT!");
    }

  });
});