title: Prevent background image flashing on change
body: <p>I'm using background image for a button and switch to a different one on <code>:hover</code>.</p>
  
  <p>When the switch happens on the first mouse over it briefly flashes the background color. (I set it to orange here so it's more noticeable, it does the same with white background, or if I leave the background color unset). However, it does not flash on subsequent mouseovers.</p>
  
  <p>How can I prevent the first flash of the background color that happens on page load, and first mouseover?</p>
  
  <p><a href="https://codepen.io/ClayN/pen/EeeRyP" rel="nofollow noreferrer">https://codepen.io/ClayN/pen/EeeRyP</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.backgroundbutton {
    background-image: url('http://www.BungalowSoftware.com/images/silver-background.jpg');
    width: 100px;
    height: 30px;
    background-color: orange;
  }
  
  .backgroundbutton:hover {
    background-image: url('http://www.BungalowSoftware.com/images/silver-background2.jpg')
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a class="backgroundbutton"&gt;hover over me&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>