Help! responsive cross-fading background issue

Code Feedback
1

I want a cross-fading background for my home block portfolio
HTML

<div responsive nav bar <div block-1 ----- <div background-img -- ---------- <div bimg1 -- ---------- <div bimg2 ------ <div top-box

JS
If viewport < 1000px
use small size picture(512x350)
else big size(1024x700)

function changebackimg
bimg1 fadein, bimg2 fadeout

question 1:
how to set the breakpoint, I want to set at 830, but it didn’t work. it just switch file randomly, not at the width=830px

question 2
if i run the program on ipad, it will still show the big size pictures for once, then switch to small size, any idea why?

thanks
here is my codepen link http://codepen.io/hsiangshen/pen/YGQNLE