How to use an image for your Squarespace header

Apr 1

Squarespace's header menu options offer some sleek and user-friendly looks, but it limits us to solid colors and gradient sfor the header background. That's great for clean, minimal designs, but what if you want something with more personality?

That's where a little bit of custom code comes to the rescue! In this tutorial, you’ll learn how to transform your header by using your own custom image for the background. Whether you want a subtle pattern, a brand-specific texture, or a stunning photograph that sets the mood for your entire site, this simple code snippet makes it possible.

Check out the video below to learn how you can use an image for your header background. When you're ready to give it a go, you'll find the codes and steps outlined below.

How to Add a Custom Header Background Image to Squarespace:

Step 1: Make your header transparent

Enter edit mode by clicking the "Edit" button
Select "Edit Site Header"
Choose "Edit Design" on the right side panel
Under the "Color" tab, select "Solid"
Drag the opacity slider all the way to the left (0%)
Make sure your navigation links have good contrast against your planned background image

Step 2: Upload your image

Save and exit the header editor
Go to "Pages" in the left menu
Scroll down to "Website Tools"
Select "Custom CSS"
Click the dropdown menu and upload your custom image file

Step 3: Add the custom code

I’ve included both codes below. The first code for only the header of your site, and the second one will also add that image to your mobile menu.

Pro Tip: I like to make sure my images are 2500px wide. The height depends on the header design (if the logo and links are big or small) but I always have a minimum of 900px in height for any images I might end up using for the mobile background image code.

/* website header only - insidethesquare.co */
.header {
background-image:url( your-image-url-here);
background-size:cover;
background-color:#fff!important; /* fallback color if image doesn't load */
background-position: center /* optional */
}

/* header and mobile menu background - insidethesquare.co */
.header, .header-menu-bg {
background-image:url( your-image-url-here);
background-size:cover;
background-color:#fff!important; /* fallback color if image doesn't load */
background-position: center /* optional */
}