title: How to change css background-image on click?
body: <p>I'd like to change the css "background-image:" when someone clicks a button. </p>
  
  <p>I'm not sure if I'm able to change it through css or if I would need to incorporate java script. Also, if I need java script what type of code would I need? </p>
  
  <p>My current work around is with css and it looks like:</p>
  
  <pre><code>.hello-button {
  background-image: url("hello.png");
  background-repeat: no-repeat;
  background-attachment: inherit;
  background-position: center;
  -webkit-transition: 2s ease-out;
  -moz-transition: 2s ease-out;
  -o-transition: 2s ease-out;
  transition: 2s ease-out;
  }
  
  .hello-button:hover {
  background-image: url("bye.png");
  background-repeat: no-repeat;
  background-attachment: inherit;
  background-position: center;
  transition-delay: .7s;
  -webkit-transition-delay: .7s;
  -moz-transition-delay: .7s;
  -o-transition-delay: .7s;
  }
  </code></pre>