This tutorial will show you how to use an image for your mobile menu background in Squarespace.

But first, two quick things to mention before you give it a go on your own Squarespace site:

→ You can use a JPG or a PNG or even a GIF; any of those formats will work in this code.

→ There are two codes below - one for Brine and one for 7.1 - make sure you are using the right one for your site. If you don’t know what version or theme you are using, find out here.

Here is the code for 7.1 sites:

.header-menu .header-menu-bg{
background-image: url(your-url-here);
background-size: cover;
}

Here is the code for Brine sites:

Pro tip: You don’t have to use the width:100% part of this code if you don’t want to. Just remove that line and keep the rest.

.Mobile-overlay-menu{ 
background-image:url(url-goes-here);
background-size:cover; 
width: 100%;
}

.Mobile-overlay-close{z-index:2}