css background=contain URL change not working cross browser

Question

so I have a gallery made out of a DIV with changing background image depending on the preview image/text you click on.

As the pics are different sizes I chose to use "background size contain" .. my switch function works perfect in Safar but less so in Firefox and Chrome.

What am I doing wrong (why is it only showing correctly in Safari) how do I need to alter my code? .... or is there even a better way around that?

http://jsfiddle.net/8m7VB/2/

<div id="bilder" style="position: absolute; bottom: 0px; left: 0px; width: 100%;
height: -moz-calc(100% - 170px); height: -webkit-calc(100% - 170px); height: -o-calc(100% - 170px);

background: url(https://www.google.de/logos/doodles/2013/holiday-series-2013-2-5173241802915840-hp.png) center bottom no-repeat; background-size: contain; z-index: 1;"></div>
<a onclick="document.getElementById('bilder').style.background='url(http://cdn3.spiegel.de/images/image-550112-thumb-fjcw.jpg) center bottom no-repeat'">google<a>
<a onclick="document.getElementById('bilder').style.background='url(http://cdn3.spiegel.de/images/image-549692-thumb-gsor.jpg) center bottom no-repeat'">bild<a>

THANKS A MILLION!

Answer 1

When performing document.getElementById('bilder').style.background= you are not only overriding the css property background but also the sub properites, i.e. background-size. You do not redefine background-size, so this will be set back to default (auto).

I would use document.getElementById('bilder').style.backgroundImage instead, so you are not overriding the other sub properties. http://jsfiddle.net/8m7VB/3/