Customizing the Mobile Menu Background in Squarespace | Will Myers

Choose from 3 different code snippets to add a background image, GIF, or video to the mobile overlay menu in Squarespace.

Background Image

To add a background image to your mobile menu in Squarespace, you need to use the following code.

Add a background image to your mobile menu in Squarespace

/**
 * Background Image For Mobile Menu
 * From Will-Myers.com
**/
.header-menu-bg {
  --opacity: 0.75;
  --blur: 5px;
  
  &:after {
    background-image: url(YOUR_IMAGE_URL);
  
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: 50% 50%;
    filter: blur(var(--blur, 0px));
    transform: scale(1); 
    opacity: var(--opacity, 1);
    transition: transform 0.8s ease;
  }
  .header--menu-open &:before{
    transform: scale(1.1); 
  }
}

To get the background image to work, follow these steps

Paste the code above and paste it into your Design » Custom CSS area.
Upload your image to the Asset Library in Squarespace.
Right click on the image and hit “Copy Image Address”
Paste the image URL in the url() function on line 10 in the code above.

Adjust any of the variables at the top (starting with two dashes) to change the opacity or blur amount.

Great news, to add a background GIF, the setup is the exact same as the above! GIF’s are processed as images with the background-image property in CSS, so just upload your GIF instead of an image on step two and use that URL.

Creating a GIF’s can be difficult, though. My preferred method is to turn a video into a GIF. If this is the route you want go, I’d recommend Gifski. I’ve used it for the past year and it’s been fantastic.

The big thing you want to remember when creating GIFs is maintaining a reasonable file size. Be sure the GIF you upload is 500kb or less. You can go larger, but google likes your file sizes to be small, so keep it as small as possible.

Background Video

So, what if the GIF isn’t high enough quality. Well, use a video!

The setup is roughly similar to what you used for an image or GIF above, just with a few extra steps.

Here’s the code you’ll need:

/**
 * Background Video For Mobile Menu
 * From Will-Myers.com
**/
.header-menu-background-video{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
}

<!-- Background Video on Mobile -->
<script>
  (function(){
    let url = 'VIDEO_URL';
    let poster = 'FALLBACK_IMAGE_URL';
    let backgroundVideo = `
<div class="header-menu-background-video">
  <video playsinline autoplay loop muted preload="none" poster="${poster}">
    <source src="${url}" type="video/mp4" />
  </video>
</div>`;
    let background = document.querySelector('.header-menu-bg')
    background.insertAdjacentHTML('beforeend', backgroundVideo);
  }())
</script>

For this to work, we need to replace our code from above, so remove that if you haven’t done so already. Next,

Paste the Styles into the Design » Custom CSS area.
Upload a video to your Design » Custom CSS » Manage Custom Files area. (be sure to use a .mp4 file format, must be 20mb or less)_
Click on the file to get the video URL.
Paste the Javascript into your Settings » Developer Tools » Code Injection » Footer area
Replace VIDEO_URL in the url variable of the Javascript with the url of the video you just uploaded.
As a fallback, in case the video doesn’t load, let’s add a fallback image. Upload an image to the Asset Library area and right click on it to “Copy Image Address”
Replace the FALLBACK_IMAGE_URL in the poster variable of the Javscript with the url of the image you just copied.