Responsive background image

Hello!

I am struggling with making the background image of the site mobile responsive.
The problem is that the picture is taken in landscape and because of that, when the site is opened in a portrait mode on a mobile device, the background image of the first page occupies only about half of the screen; when the device is switched to landscape position, it is all fine, of course.
I have tried to add different types of code to the Custom CSS but nothing really seems to work properly.

One of the variety was this code:

div {
width: 100%;
height: 400px;
background-image: url(‘img_flowers.jpg’);
background-size: cover;
}

this was kind of what I was looking for, except it messed up the header section, meaning that in the desktop version of the site the logo of the site and the main menu shifted a few centimeters down, moreover in the mobile version when I pressed “hamburger” button, there was a big grey space between the top of the menu and the first menu item “Par meditāciju”.

I was also looking for an option to switch between different images depending on the screen size and I added a code like this in Custom CSS :

/* For width smaller than 400px: */
body {
background-image: url(‘img_smallflower.jpg’);
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url(‘img_flowers.jpg’);
}
}

but nothing changed at all (of course, I changed the “background-image: url” line to suit the titles of images that I have in my library). I am very new to CSS, that’s maybe why I am not very with successful with this…

I will appreciate any help, hint, suggestion!
Thanks!

The page I need help with: [log in to see the link]