Создание меню CSS с анимацией зависания

Question

Я делаю меню с 2 пунктами в строке, и я хочу, чтобы у них было фоновое изображение, и при наведении изображение изменится на другое. Я смог сделать это в chrome, используя контент в CSS, но Firefox и IE не поддерживают это. Таким образом, это должно быть сделано с фоновым изображением. Проблема в том, что с контентом я могу указать, что кнопки будут иметь 35% ширины и высоты левой стороны, делая это с фоновым изображением невозможным, я должен сказать конкретно, что они будут иметь px высоты и это не изменит размер при изменении размера окна. Когда я изменяю размер окна, левая сторона меняет размер, поэтому внутри него автоматически изменяется размер, потому что я определил 35% его. Вот пример кода, как я это сделал (работает в chrome, а не в firefox и IE). Может ли кто-нибудь помочь мне сделать это с фоновым изображением и изменить размер кнопок при изменении размера окна?

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 */ 
} 

С фона изображения я должен сделать это следующим образом:

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 */ 
} 

С наилучшими пожеланиями

Answer 1

Это не является допустимым использование content имущества, являющегося предназначенный только для псевдоэлементов.

Если вы установили свойство display своих пролетов на inline-block, вы можете установить высоту относительно ширины, используя свойство padding. Затем установите background-size на contain и центрируйте свои изображения.

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"> 
 
     <a href="/sensor"><span id="menu_sensor"></span></a> 
 
    </li> 
 
</ul>