Hi Randy,
If your interested you could use my self developed cross browser full screen foreground images system: https://yourweblab.nl/full-screen/ (you can test it in any browser or device and see what image is loading).
I implemented Lazy Sizes from Farkas on Github: https://github.com/aFarkas/lazysizes and created a couple of lines CSS magic that you can see when you look in to the page source. It serves every device with the proper pixel ratio image in webp and jpg.
An other example I made in Bootstrap 3: https://www.buitenlust.nu
Bootstrap 4: https://www.wilart.nl
My old website: https://www.allmedialab.nl
The advantage of my system is super fast loading of the website and no unnecessary use of bandwidth!
The disadvantage is that at first it looks like a lot of work.
I created it for Bootstrap but it works on any framework including Foundation.
Unfortunately I have not much time for support.
You can make the resolution as high as you want by adding larger images to the system.
To create the images: https://www.responsivebreakpoints.com/
Regards,
David