index-page Custom Background // Better Index Page Setup

Site URL: https://tropicalratchet.com

password: g

I have a rather "hacky" setup using the on-hover displays that Index pages offer to give an illusion of interactivity. I understand it won't quite work as well on mobile but I'm targeting Desktop users for this site anyway. Regardless, I have hit a wall..

I'm attempting to accomplish two tasks, one being rather easy yet somehow it isn't quite clicking, while another possibly being a bit more difficult:

1: Change the background on the Blank Pages that are listed within the index. I've tried various code inserts in CSS and Code blocks but for some reason they have yet to click.. Right now the backgrounds of the pages when clicked via the homescreen/Index are white. Would like them to be the image I have uploaded into my Custom CSS file directory

Currently:

This is the ideal end setup: 

Base Background:

With images on top:

2. Accomplish this specific look and be sure it translates between Mobile and Desktop. I used code to force a specific width based off of screen size but that too hasn't worked.

What I have currently: 

What I'm aiming to achieve:

On-Hover:

I understand this is rather hacky and am entirely open to other suggestions. However I do think it is possible within the current Squarespace framework + without using Fluid Engine.

Check out what I have currently:

https://tropicalratchet.com

password: g

Any tips greatly appreciated! Thank you