No replies
mellanslag
mellanslag's picture
Offline
newbie
Last seen: 5 years 17 weeks ago
Timezone: GMT+2
Joined: 2014-10-13
Posts: 1
Points: 2

Hello,

I have a problem with a background-image combined with a linear-gradient-effect as background-color with :hover, it just doesnt work together.

In particular I'm speaking here of the .house and .house:hover class, in the middle of the css-document.

At first, here the code
-html-page: http://mellanslag.de/MELLANSLAG/index.html
-css-document: http://mellanslag.de/MELLANSLAG/main.css

[CSS - groups .house for a better overwiew]
.house {
width: 50px;
background-color: linear-gradient(to bottom, #F8F7ED 85%, #7A7A7A 100%);
background-color: -moz-linear-gradient(top, #F8F7ED 85%, #7A7A7A 100%);
background-color: -webkit-linear-gradient(top, #F8F7ED 85%, #7A7A7A 100%);
background-image: url('haus.png');
background-position: 11px 8px;
background-size: 30px 29px;
background-repeat: no-repeat;
height: 47px;
padding: auto;
margin-top: 0px;
border: none;
}

.house:hover {
width: 50px;
background-color: linear-gradient(to bottom, #345771 85%, #29455A 100%);
background-color: -moz-linear-gradient(top, #345771 85%, #29455A 100%);
background-color: -webkit-linear-gradient(top, #345771 85%, #29455A 100%);
background-image: url('hausweiƟ.png');
background-position: 11px 8px;
background-size: 30px 29px;
background-repeat: no-repeat;
height: 47px;
padding: auto;
margin-top: 0px;
border: none;
}

If you go on the page with your mouse over the house of the navigation-bar, you see that the white image loads, but the background-color stays the old one.

But if i set background-color: #345771; [the normal, top-blue] it works, just without the gradient.
For a better explanation I uploaded the pages too:
html-page: http://mellanslag.de/MELLANSLAG/index2.html
css-document: http://mellanslag.de/MELLANSLAG/main2.css

[new CSS]
.house {
width: 50px;
background-color: linear-gradient(to bottom, #F8F7ED 85%, #7A7A7A 100%);
background-color: -moz-linear-gradient(top, #F8F7ED 85%, #7A7A7A 100%);
background-color: -webkit-linear-gradient(top, #F8F7ED 85%, #7A7A7A 100%);
background-image: url('haus.png');
background-position: 11px 8px;
background-size: 30px 29px;
background-repeat: no-repeat;
height: 47px;
padding: auto;
margin-top: 0px;
border: none;
}

.house:hover {
width: 50px;
background-color: #345771;
background-color: #345771;
background-color: #345771;
background-image: url('hausweiƟ.png');
background-position: 11px 8px;
background-size: 30px 29px;
background-repeat: no-repeat;
height: 47px;
padding: auto;
margin-top: 0px;
border: none;
}

And when i remove the background-image stuff in the old css code, the gradient works too, but now without the image.

So, what can I do to get all three things work together? Thanks for you help!
mellanslag