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?
<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!
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/