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.
This is my 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;
}
<div id="tcolor"><button id="templatebtn"></button></div>