Page BG image not scaling

I've assigned a 2200px wide image as my page BG, and set page BG color to black. However, on phones, the image displays still (I'd expected it to fall back to the solid color by default). And it displays only a small portion - it isn't scaling as I would expect.

I'm hoping someone has an answer seeing as Ced is away.

www.baysauto.com/

in the custom css for that box, do:

Of course, thats IF you want it at that scale - some images look odd when the same one is used on a desktop and a mobile/tablet in portrait view due to it being 'squished'.
What you can also do is use separate images for smaller devices.

To do this:
In responsive design, in the custom CSS box for each resolution use the following code:
(of course replacing 'image1' with the name of the image(s) you use)
You then should use the custom images (under parameters>custom images) to include the new images in the template folder.

Thanks, Boradan, but neither seemed to have any effect on the site in mobile. I did make a new image for mobile (for the second alternative), but nothing happened. Same old, same old.

site link?

www.baysauto.com

Not going to be a hell of a lot that you can do with that image to be honest as far as rescaling goes due to the nature of it.
Have a look at the site here: ismysiteresponsive.com/ to see what I mean.
Removing the image altogether in smaller devices would be best:
Use this in the responsive layouts for the ones where is totally sucks:
Even the original image in desktop view (I am using 1920x1080) does not look great.
Personally, I would crop the image down to suit that resolution more (there is a lot of wasted space at the top of the image that could be cut out.)
I would also change it to 'fixed' instead of 'scroll' as currently, the ONLY reason there is a vertical scroll is to see the bottom of the image on the main site.
(I assume the reason for : is to see the full picture?

What is the vertical menu extension you are using?