[WhiteFox]

Доброго времени суток, помогите пожалуйста решить задачку.
Есть две картинки в хедере которые переливаются вертикальной линией.

1) Когда ставлю bg size 100% получается две целых картинки которые наезжают, а не половинки
2) не работает подстраивание под размер экрана
[JS]function heightDetect() {
		$(".s_home").css("height", $(window).height());
	};
	heightDetect();
	$(window).resize(function() {
		heightDetect();
	});[/JS]
и последнее, как этому задать границы сверху и снизу что бы не наезжал.
Вот сам код:
<div class="photoToggle">
			<div class="photoToggle-top"></div>
			<div class="photoToggle-toggle"></div>
			<div class="photoToggle-btn"></div>
		</div>

$('.photoToggle').mousemove(function(e) {
    var pos = $(this).offset();
    var elem_left = pos.left;
    var elem_top = pos.top;
    // положение курсора внутри элемента
    var Xinner = e.pageX - elem_left;
    var Yinner = e.pageY - elem_top;
    $('.photoToggle-top').css('width', Xinner)
    $('.photoToggle-toggle').css({
      'left': Xinner - 20,
      'top': Yinner - 20
    })
  })

.photoToggle
width: 100%
height: 480px
position: absolute
.photoToggle-top
width: 40%
height: 610px
position: absolute
top: 0
left: 0
z-index: 2
background: url(../img/bg/head_bg2.jpg)
.photoToggle-toggle
content: ""
width: 40px
height: 40px
position: absolute
top: 180px
left: 380px
z-index: 3
border-radius: 20px
background-color: rgb(66, 134, 244)
.photoToggle-btn
width: 100%
height: 610px
position: absolute
top: 0
left: 0
z-index: 1
background: url(../img/bg/head_bg.jpg)