Header image on mobile

Site URL: https://tuba-octopus-s32b.squarespace.com/

Hello friendly helpers!

I'm working on this website and managed to add a background image to the navigation.

Is it possible to add this on the mobile version behind the logo, like a header?
I already have a plan B, the image is now in the navigation, but I would love to add it as a header.
It should look like the attached example.

I'm using a brine template: https://tuba-octopus-s32b.squarespace.com/
The password is: umoweb

It would be nice, if anyone could help me.

Use this code

header.Header, .Mobile-bar.Mobile-bar--top {
    background-image: url('https://static1.squarespace.com/static/60618935c17ee2510420a2b2/t/6065add59bd4fa05043b458e/1617276373903/Gluecklicht_Navigation.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

Thank you so much @tuanphan, that's perfect!

4 hours ago, benja said:

Thank you so much @tuanphan, that's perfect!

Do you want to fix these?

1. (Tablet-Homepage) Blue bar on right of screen

2. (Mobile-Homepage) White bar at bottom of homepage

@tuanphan yes that would be great, do you have a solution

On 5/4/2021 at 8:23 PM, benja said:

@tuanphan yes that would be great, do you have a solution

Add to Design > Custom CSS

html, body {
    overflow-x: hidden;
}
@media screen and (max-width:991px) {
.Mobile-bar.Mobile-bar--bottom {
    display: none;
}
}

@tuanphan thank you so much for your help!

On 5/12/2021 at 4:04 PM, benja said:

@tuanphan thank you so much for your help!

You're welcome. If you have any other problems, just reply here or ask new question.