Help! responsive cross-fading background issue

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

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

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?

here is my codepen link