使用悬停动画制作CSS菜单

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?I am making a menu with 2 items per line and I