Background image gets cut off on mobile

Hello, I recently tried making my website more mobile responsive using media queries.
However, when I scroll down my website on my phone I notice that theres a white space at the bottom that should not be there. It should be my background image instead. I have the background set as position fixed, so Im wondering why its showing up like this. Is there something in media queries Im suppose to be coding?

Any help would be appreciated!

Hi, there!

Are you still having problems with the sizing of your <canvas>?

Hello! Yes I sure am, the bottom is still cropped when scrolling down it using a mobile phone. You can see if you visit the link here Billy McFeely

Admittedly, I am not very knowledgeable when it comes to using canvas. A very easy and simple fix is to just give your canvas 100% width and height, but this will distort the images within your canvas. and make them grow.

Ideally, what you will want is JavaScript or JQuery that will change sizing and aspect ratio dependent on the user’s device. Unfortunately, that is not an area in which I can help. But I have found these questions on StackOverflow which hopefully can give you more guidance:

Resize HTML 5 canvas
HTML5 Canvas 100% Width Height