Change menu height for devices

I have a menu set to 60px in height with a background image and looks fine on desktop.

When I go to mobile, the background image resizes very nicely but the menu height stays at 60px. On the desktop, the image gets the menu buttons which is good. On the mobile device, the background image is now blank (as the menu items are in the off-canvas menu) so the image needs some text over it. Hence, a different image...

So, two problems:

1. How do I get the menu height to change for the different devices?
2. How can I select a different image for the different devices?

Thanks!