How To Add Image Background to Squarespace Header
In this blog tutorial, you will learn how to add a custom background image to your Squarespace header.
Let’s dive in..
Watch the video
Check out the YouTube video below 👇
The first step is to add an image block and upload the image you want to use as your header background. This is necessary because we need an image URL for it to work. You can take the image URL from another website if you want, but I highly recommend uploading it to your own website and obtaining the link that way. This ensures that the image won’t break.
When the image is uploaded, it should look like this. Next, go to the Custom CSS section of your page and copy-paste the following code inside:
header#header {
background-image: url();
background-size: cover;
background-position: top top; // Change this to mach where you want the image to be focused on for example center center | bottom botton | top left… etc
background-repeat: no-repeat;
}
When the code is copy pased click on save.
From there, right-click the image you uploaded earlier and open it in a new tab. It should then look something like the image below. Next, copy the URL of the image.
Within the brackets URL() in your code, paste the URL of the image you want to add.
PRO TIP:
You should remove any formatting parameters from the image URL, such as ?format=…w. This is because these parameters can affect the image's width and potentially make it appear blurry.
For example, the original link for my image was:
However, I removed everything after .jpg, resulting in the final link:
This ensures the image appears at its best quality without unnecessary compression or resizing.
You can also know delete the image block we uplaoded earlier - and boom you now have your own background image on your Header
Your designer
I'm Victor Rolf, an expert Squarespace designer .If you'd like to discuss a potential project, you can email me at victor@rolfmade.com or get in touch here. Alternatively, book a free 15-minute consultation call here.
