/*This is one of the thumbnails that i have*/
scrollbox li:nth-child(29){
    background-image: url("http://i.imgur.com/snDhpHO.jpg");
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}
/*This is the container where the image is "sent" to*/
/*Also, the transition for Firefox is not appearing correctly, better said, it doesn't transition at all, See it in Chrome/Opera and then compare to Firefox. If i could get some help on this issue as well it would be very helpful*/
viewer{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    display: block;
    width: 600px;
    height: 450px;
}

function getId(element_Id){
    var id = document.getElementById(element_Id);
    var div = document.getElementById("image");
    var img = window.getComputedStyle(id,null).getPropertyValue("background");
    /*ffxxx is for Firefox but works as well on IE*/
    var ffimg = document.defaultView.getComputedStyle(id,null).getPropertyValue("background-image");
    var ffpos = document.defaultView.getComputedStyle(id,null).getPropertyValue("background-position");
    var ffsize = document.defaultView.getComputedStyle(id,null).getPropertyValue("background-size");
    var ffrep = document.defaultView.getComputedStyle(id,null).getPropertyValue("background-repeat");
    if(navigator.userAgent.indexOf("Chrome") != -1 || navigator.userAgent.indexOf("Opera") != -1){
        div.style.background = img;
    }else if(navigator.userAgent.indexOf("Firefox") != -1 ){
        div.style.setProperty('background-image', ffimg);
        div.style.setProperty('background-position', ffpos);
        div.style.setProperty('background-size', ffsize);
        div.style.setProperty('background-repeat', ffrep);
    }else if(navigator.userAgent.indexOf("rv:11") != -1 ){
        div.style.setProperty('background-image', ffimg);
        div.style.setProperty('background-position', ffpos);
        div.style.setProperty('background-size', ffsize);
        div.style.setProperty('background-repeat', ffrep);
    }else{}
}

<gallery>
    <scrollBox>
        <ul>
            <li onclick="getId(this.id)" id="29"></li>
        </ul>
    </scrollBox>
    <viewer id="image">
        <zoom onclick="viewFull()">
            <div id="container">
                <img id="fullView" src="http://i.imgur.com/IH6vOT2.png" />
                <h3 id="zoom">Full View</h3>
            </div>
        </zoom>
    </viewer>
</gallery>