How to show a background image behind your site header
The site header is the design element, usually displayed at the top of your website, that holds your navigation menu and logo.
To stretch and expand the background image so it reaches the top of your website, you can change the site header color style to Adaptive. The site header then becomes transparent so the background image shows behind the navigation text.
This technique gives your website a more expansive feeling when visitors first view it because the image blends into the site header.
You can make the site header transparent with any Squarespace template
Your site header can blend in or stand out
This blog post explains how to make your site header transparent so it blends in with the first section of each page on your website.
If you prefer your site header to be clearly separated from the first section, you can set a separate color or color gradient as its color style.
Watch the video to learn how to change color styles for your site header, including making it see-through so it blends in.
Use the site header style Adaptive to make it transparent
The instructions below show you how to change the color style for a site header to make it transparent. Site header styles are a site-wide style change and affect every page.
If the first section of a page has a background image, the image displays behind the transparent site header and navigation menu. If the first section doesn’t have a background image, the site header has a solid color behind it, inheriting the color theme of the first section on the page.
To get started, open any page on your website and click Edit to open it in edit mode.
You can initiate the style change from any page, but once saved it becomes a site-wide change.
Hover over the site header area and click Edit Site Header.
Then click Edit Design.
When the Site Header Styles pop-up opens, click the Color tab.
Change the color style from Solid to Adaptive.
Save the page to save the changes.
Change the site header color style to Adaptive to blend in the background image
Choose a background image that works with a transparent site header
If you use a transparent site header, you’ll want to select background images for the first section of each page that allow the navigation text to remain readable.
I tend to choose background images that have an upper section that is a bit lighter so that dark text can still be readable. You could also choose darker background images that are more evenly dark at the top and use light-colored navigation text. The main point is that the text of the navigation menu has to be readable.
Avoid “busy” images that cover or camouflage the navigation text, making it harder to read.
Adjusting the placement of a background image
You can use the Squarespace image editor to drag the focal point (the white circle in the middle of the image) to set a different center point for the image. Moving the focal point up or down moves the background image up or down to help you make the navigation text readable.
To shift the center point of an image, drag the circular focal point tool to another area. Preview the change on desktop and mobile displays.
Pages without a background image show the color theme
The site-wide header color style is applied to every page on your site.
If you omit a background image on any page, the site header uses the color theme assigned to the first section on each page. It shows the color that is assigned to the Background element for that theme.
It’s a good practice to assign the same color theme to each first section so the colors remain consistent no matter which site header style you choose.
Checking the change on each page
You'll want to check the site header on each page to make sure it's compatible with the first section on that page. Every page picks up the style selection of the site header.
If a background image is defined for the first section, you see that image, extended to the top of the website.
Sometimes a particular background image needs to be replaced. Or you may need to make some adjustments to the site navigation text style or color if you find the text is difficult to read on some pages.
Don’t forget to check on mobile too
Mobile devices compress the navigation menu, so readability of the text is not an issue. But you should preview site-wide changes on both mobile and desktop to make sure both versions look good.
Get inspiration from Squarespace templates
If you browse through Squarespace templates, you’ll be able to spot the difference between those that use transparent site headers and those that don’t. You can change the site header style on any template you choose for a new website, but browsing through the templates gives you some ideas about background images that work well.
My clients often have a preference about whether they’d like the background image to show through or not on their new websites. Now that you know about this choice, you may find you have a preference too.
