Change background color of a div with a button inside

Question

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>

For the love of all things programming, please format your CSS. — RhapX, Aug 10 '15 at 01:07

score 0 · Accepted Answer · answered Aug 10 '15 at 01:17

0

I believe this is what you were looking for.

#templatebtn {
    position: absolute;
    border: none;
    background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo1vDaH0IexRj_MOvI7AMzSGt79t_4vvVNccccLZz9FkP2n4wU);
    background-repeat: no-repeat;
    background-position: center;
    width: 140px;
    height: 94px;
}

#tcolor{
    background-color: #d0cece;
}

#templatebtn:hover,
#templatebtn:focus {
    background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo1vDaH0IexRj_MOvI7AMzSGt79t_4vvVNccccLZz9FkP2n4wU), -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%);
}

<div id="tcolor"><button id="templatebtn"></button></div>

answered Aug 10 '15 at 01:17

RhapX

1,663
2
10
17

Fairly sure the OP is trying to change the div background, not the button. Which I'm pretty sure isn't possible with CSS being cascading and all – DylanB Aug 10 '15 at 01:45
@DylanB perhaps I misread the question a bit, but at the same time, the last thing they mention is, "The background color is correct but the image disappears when focussed." Based on that is where I gave an answer. – RhapX Aug 10 '15 at 01:53
1

Oh believe me, reading the question was an emotionally exhaustive exercise but I think the question is asking how to change the parent background from the childs' focus. I could be wrong... – DylanB Aug 10 '15 at 01:55
Yes , is just exactly what i want to do. – Camilo Rincon Aug 10 '15 at 01:55
@alsuelo what is exactly what you're trying to do? RhapXs' answer or my interpretation? – DylanB Aug 10 '15 at 01:59
1

Excellent, you need to rephrase your question then. – DylanB Aug 10 '15 at 02:08

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

templatebtn {

    background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo1vDaH0IexRj_MOvI7AMzSGt79t_4vvVNccccLZz9FkP2n4wU);
    height: 94px;
    width: 140px;
    position: relative;
    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;

}

Change background color of a div with a button inside

2 Answers2

templatebtn {