title: Change background color of a div with a button inside
body: <p>I am trying to change the background color of a button when it has focus. The background color is correct but the image disappears when focussed. I'm looking for a solution using pure CSS.</p>
  
  <p>This is my code </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    #templatebtn {
          background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo1vDaH0IexRj_MOvI7AMzSGt79t_4vvVNccccLZz9FkP2n4wU);
          height: 94px;
          width: 140px;
          position: absolute;
          background-repeat: no-repeat;
          border: none;
          background-position: 50px;
      }
  
      #tcolor {
          background-color: #d0cece;height: 93px;
          width: 140px;
      }
  
      #templatebtn:hover, #templatebtn:focus {
          background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo1vDaH0IexRj_MOvI7AMzSGt79t_4vvVNccccLZz9FkP2n4wU);
          height: 94px;
          width: 140px;
          position: absolute;
          background-repeat: no-repeat;   
          background: -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%); height: 94px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div id="tcolor"&gt;&lt;button id="templatebtn"&gt;&lt;/button&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>