Header image/background format

This is the URL of the blog: http://elcalaixdelarosseta.com/
And here’s my problem.

I’ve set a header image, and then a background image, trying to extend my header image to the sides.

In the full width view (PC view), it works fine and it can’t be seen.
When you start minimizing the screen, the responsiveness adjusts the height of the header image, and that’s ok and needed. However, the background image isn’t adjusted, so it keeps its height and it doesn’t fit the image.

In the last step, when switching to mobile, a menu button appears, and that shows even more background above the image.

I would like to:

  1. Make the background to fit the height of the header image.
  2. Remove the menu button on mobile version (which doesn’t do anything :S) and the space around it, so it doesn’t show the background there.

Maybe with this setting is not possible to format, but I’m open to change any setting.

Thanks a lot.

  1. Solved! I already removed the button of mobile view, and the background now only shows by the sides of the image.

I just need to solve the issue 1.

  1. Solved!

I used this to make background image to adapt to its container.

background-size: contain;