Making a CSS menu with hover animation - css

Question

I am making a menu with 2 items per line and I want them to have a background-image and on hover the image will change to other. I was able to do it in chrome, using content in CSS, but Firefox and IE don't support this. Thus it should be made with background-image. The problem of this is that with content I can specify that the buttons will have 35% of the width and height of the left side while making this with background-image is impossible, I need to say specifically that they will have px of height and that will not make it resize when I resize the window. When I resize the window the left side resizes thus what's inside of it resizes automatically because I defined 35% of it. Here is an example code of how I made it (works in chrome, not in firefox and IE). Can someone help me doing this with background-image and still resize the buttons when I resize the window?
https://jsfiddle.net/37qbtwak/
ul.sidebar-menu li a span {
width:35%;
height:35%;
border:1px solid;
}
ul.sidebar-menu li a span#menu_sensor {
content: url('http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png');
background-repeat: no-repeat;
background-size: 100% 100%;
-webkit-background-size: 100% 100%; /* Safari */
-khtml-background-size: 100% 100%; /* Konqueror */
-moz-background-size: 100% 100%; /* Firefox */
}
With background-image I have to do it like this:
ul.sidebar-menu li a span#menu_sensor {
content: url('http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height:100px;
-webkit-background-size: 100% 100%; /* Safari */
-khtml-background-size: 100% 100%; /* Konqueror */
-moz-background-size: 100% 100%; /* Firefox */
}
Best Regards

Answer 1

That is not a valid use of the content property, which is only intended to be used on pseudo elements.
If you set the display property of your spans to inline-block, you can set a height relative to the width using the padding property. Then set the background-size property to contain and center your image(s).
ul.sidebar-menu{
list-style:none;
margin:0;
padding:0;
}
ul.sidebar-menu li{
margin:0 0 50px;
}
ul.sidebar-menu li.sub-menu{
line-height:15px;
}
ul.sidebar-menu li.sub-menu a{
color:#aeb2b7;
margin-bottom:0 20px 30px 10px;
outline:none;
text-decoration:none;
transition:all .3s ease;
}
ul.sidebar-menu a span {
border:1px solid;
display:inline-block;
padding:0 0 12.25%;
width:35%;
}
#menu_sensor{
background:url('http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png') center center no-repeat;
background-size:contain;
}
#menu_sensor:hover,#menu_sensor:focus{
background-image:url('http://www.webyposicionamientoseo.com/base/ui/images/blog/27-google-hummingbird.jpg');
color:#fff;
}
<ul class="sidebar-menu" id="nav-accordion">
<li class="sub-menu">
<span id="menu_sensor"></span>
</li>
</ul>