How to use a custom background image for your Squarespace header

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

In this Squarespace tutorial, you'll learn how to use your own image for the background of the header menu (aka main navigation) of your Squarespace website.

We'll use two different images; one for the mobile version of Squarespace and one for the desktop version.

Here are the steps from this tutorial:

1. Upload the image to your custom files
   (Design > Custom CSS > Manage Custom Files)

2. Paste the code below in your Custom CSS

3. Delete the text image-url

4. Open your manage custom files

5. Click on the image you uploaded to add the image URL to your code

6. Save all your hard work

Here is the code for the desktop version of your site:

.header {
background-image:url('image-url’);
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}

Here is the code for the mobile version:

@media only screen and (max-width:640px){
.header {
background-image:url('image-url’);
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}
}