Webeng Webeng - 5 months ago 12
CSS Question

background color change on hover with background-size

I have the following code:

CSS:

<style>
div.testy {
border:1px solid black;
}

div.testy:hover {
background-color:red;
}
</style>


HTML:

<div class="testy" style="height:100px;
background: url('down.png') no-repeat; background-size:contain;">
aa
</div>


'down.png'
is an image with a transparent background. What I wanted to do was have the color of the background change while still keeping the image in front of the color.

The previous code does almost everything right, except that when I hover the mouse over the
div
, nothing happens.

QUESTION: Why might it be that the hovering and the background color change are not working?

Here is a jsfiddle link with the problem happening:
https://jsfiddle.net/sdsze2fv/

Answer

The problem is that you are using background: for the "background image". Differentiate background image and background color by doing background-color and background-image respectively.

div.testy {
        border:1px solid black;
    }

    div.testy:hover {
        background-color:red;

    }
<div class="testy" style="height:100px; 
background-image: url('http://www.w3schools.com/html/html5.gif'); 
background-size:contain;">
    aa
</div>