CSS vertical centering split background image not overlapping

Question

is it possible to split 2 images vertically and when resizing the browser, it wont overlap but stay vertically centered?

can the left image stay fixed so the right side of it won't cut off(overlap)

this is what i have now, but when resizing the browser smaller, it pushes the left image underneath the right. rather have the images cut off on the outer sides and never overlap each other in the middle, make sense?

#wrapper {
 width:1680px;
 max-width:1680px;
 height:500px;
 margin: 0 auto;
}
#left-image {
 width: 50%;
 position:absolute;
 left: auto;
 height:500px;
}
#right-image {
 width: 50%;
 position:absolute;
 right: 0px;
 height:500px;
}

Answer 1

for the right-image what happens if you use left: 50%; instead of right: 0px;?

Answer 2

Have you tried this jQuery plugin?

http://plugins.jquery.com/project/elementcenter

It will keep elements of choice centered.