Background image position and CSS transition

I am having trouble trying to position a background image that is animated with CSS keyframes. Currently it is a large horizontal image that slides from left to right then back to the left. My hope is that it will make the viewer feel as if they are viewing a panoramic or spinning around the room.

My issue is it works great at a large screen size, but on something such as 1280x600 all you get is the view of the ceiling. Is there a way to position it to load the background image in the center or from the bottom much like one would do for a traditional background image?

Here is a sample of my code for the background image:

.sliding-background {
    @media screen and (min-width: @screen-lg-min) {
        background: url("http://frontier.websitewelcome.com/~eventcen/images/meeting-room-pano-lg.jpg") repeat-x;
        height: 100%;
        width: 4314px;
        animation: slide-lg 30s linear infinite;
    }
  }

@keyframes slide-lg{
  /* do I need to put something here? maybe 100% on the y-axis */
  0%       { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-1757px, 0, 0);     }
  100% { transform: translate3d(0, 0, 0); }
}

CodePen Link

There is a CSS property background-position: center center; to position the background image.