Disable div bacground resizing when zooming page

Disable div bacground resizing when zooming page

I have a webpage that consist of 4 different div elements set in columns.
The page have no scrolling so all content is on screen. My question is how
to disable div backrounds zooming when zooming content because it ruins
the page structure. And ofcourse that should work in eveycase because I'm
using different backround sizes trought Media Queries. My fist question is
is that possible anyway, and will it work in IE8.
CODE:
<div id="container">
<div id="div1"></div>
<div id="div2">
</div>
<div id="div3"></div>
<div id="div4"></div>
</div>
<div id="container">
<div id="div1"></div>
<div id="div2">
</div>
<div id="div3"></div>
<div id="div4"></div>
</div>



#container {
display: table;
width: 100%; height:100%;
border-spacing: 1px;
background-color:black;
margin-left:auto; margin-right:auto;
}
#container > div {
display: table-cell;
padding:0px;
}
body,html{ height:100%; width:100%; overflow:hidden; }
#div1{ position:relative;
background-image:url(../images/bg/left.jpg);
background-size: cover;
background-repeat:no-repeat;
}
#div2{height:100%;
background-image:url(../images/bg/center.jpg);
background-size: 100% 100%;
background-repeat:no-repeat;
position:relative;
}
#div3{height:100%;
background-image:url(../images/bg/right.jpg);
background-repeat:no-repeat;
background-size:cover;
position:static;
}
#div4{ height:100%;
background-image:url(../images/bg/right2.jpg);
background-repeat:no-repeat;
background-size:100% cover;
position: static;
background-repeat:no-repeat;
}