How to Add a Background Image to the Header in Squarespace
Ever wonder how to add a background image to the header in Squarespace?
It’s actually super easy, and a great way to dress up a website.
In this tutorial, I’ll show you how to add a background image to the global header in Squarespace using the code snippet listed below the video.
Upload the Background Image for Your Header
As I discuss in this blog post, your navigation is a vital part of your website.
So when you’re choosing an image for your header, be sure it won’t obstruct the navigation text or appear too cluttered.
This is how you upload your image:
Go to Website > Website tools > Custom CSS
Select ‘Custom Files’
Select ‘Add images or fonts’
Upload your image here
Add a Background Image to the Header in Squarespace
Now that you’ve uploaded your image, all you have to do is add the code snippet below and insert your image URL where it says “IMAGE URL HERE”.
/* Add background image to header */
header#header {
background-image: url(IMAGE URL HERE);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
Was this helpful?
That was so easy, right? Feel free to drop me a line and tell me what you’ll use it for! Got any other burning Squarespace questions? Ask away…that’s what I’m here for! 👇
This page contains affiliate links
My Insta
@jenxwebdesign
Like this post?
