using jquery to randomize photos works, but photos are zoomed

this is my first time posting in the great website, I'm currently creating my own website and i'm trying to randomize the background of my page every time my page loads or refreshes, i've managed to do it using JQuery, i do have one problem which is when the photo is loaded, it's zoomed, although it used to be perfectly fine when i had a single image defined in the css file.

here's my code inside the html:

<script src="http://ift.tt/1yCEpkO"></script>

    <script>
        $(document).ready(function(){        
        var images = ['coffee.jpeg', 'lights.jpeg', 'london.jpeg'];
        $('#bg').css({'background': 'url(css/images/' + images[Math.floor(Math.random() * images.length)] + ')'});
        });
    </script>

the code in the css file:

#bg {
    /*/-moz-animation: bg 60s linear infinite;
    -webkit-animation: bg 60s linear infinite;
    -o-animation: bg 60s linear infinite;
    -ms-animation: bg 60s linear infinite;
    animation: bg 60s linear infinite;/*/
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    /* Set your background with this */
    /*/background: #348cb2 url("images/lights.jpeg");
    background: #348cb2 url("images/coffee.jpeg");/*/
    background-repeat: repeat-x;
    height: 100%;
    left: 0;
    opacity: 1;
    position: fixed;
    top: 0;
}
    #bg {
      background-size: 2250px auto;

      width: 6750px;
    }

if anyone could help me with this I'd be so grateful !

Thanks a lot :)