How to use a custom background image for your Squarespace header // Header Background Image Tutorial

[@InsideTheSquare]

⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: kzbin.info/www/bejne/m6atonuOqMR_Z68

[@jesseman8839]

Thanks for the tutorial! FYI, the commas surrounding the "image-url" in the example code in the description are different from each other.

[@InsideTheSquare]

Try it out! If you get stuck, feel free to submit a code help request here: insidethesquare.co/code-help

[@LizBissonette]

Is there a way to do this on only one page of your blog and not the whole thing?

[@InsideTheSquare]

Great Question! Adding code to your site-wide CSS file under design > custom CSS will put your code on every page. But there are two ways to add code to a single page - check out this tutorial for more help: insidethesquare.co/singlepage You can also use a unique block ID to target a specific thing on your site; check out this tutorial for more info: kzbin.info/www/bejne/nmnUl42alqaHmLc Hope that helps! 💙

[@Moe-Talks]

Thank you. I've seen a couple of your videos and they have been helpful.

[@InsideTheSquare]

You're welcome! I'm so glad that my work is helping you with yours :)

[@lesvillasin1276]

This is very helpful! How can I add that kind of block to any part of my website, like the same size block to a part in our website?

[@InsideTheSquare]

Adding code to your site-wide CSS file under design > custom CSS will put your code on every page. But there are two ways to add code to a single page - check out this tutorial for more help: insidethesquare.co/singlepage You can use a unique block ID to target a specific thing on your site; check out this tutorial for more info: kzbin.info/www/bejne/nmnUl42alqaHmLc

[@NIALondon-t5x]

how do I keep the menu - logo - cart at the top of the header? when I extend the size of the header the menu-logo-cart seem to also move to the centre of the header which ends up looking silly.

[@InsideTheSquare]

I would recomend changing the background size: contain vs cover part of the code instead of adjusting the size of the header. Otherwise you can also use the site logo/title size slider in the design menu inside squarespace instead of code.

[@richloney4560]

Thanks for this and all your great guidance. Question. Is there a way to add an animation to the background of the header by using an animated GIF or video?

[@InsideTheSquare]

Great question! I'll have to brainstorm on this one; probably possible with some clever CSS. If I am able to create a code for it, I'm sure it will make a great tutorial so stay tuned!

[@TaigaFlyProductions]

hey! this isnt working for me? the photo wont pop up in my header. im trying to add a larger photo so it drops down a bit for my shop, is there anything you can suggest for this?

[@InsideTheSquare]

Intersting question. The header of your website is on top of your page content, layered like a brick, so it can't really overlap a section. What you can do is upload an image as the background of your page section that features your header image at the top of it, then set your header to transparent and then use CSS to pull the section background up. It is possible but its also complicated. I would recommend posting in the Squarespace forum for some support with this specific idea.

[@amandamaple6974]

When you edit the squarespace background, does it update on all pages of your site? Or just that one page? I am trying to have a page that has a background image that is different from the current header

[@InsideTheSquare]

Sure! You can add any code to one specific page. I have a tutorial that will walk you through it: insidethesquare.co/singlepage

[@byronstuff]

You mentioned sharing a link to your fav free image compressor. Can you share that one? Thanks!

[@InsideTheSquare]

Totally! Sorry I forgot that part 😅 I love tinypng.com Not affiliated with them, just a fan 😎

[@newz-tube]

Thank you very much!

[@InsideTheSquare]

You're welcome! :)

[@harry_davies]

This is great thank you! My 2 questions, what’s the alternative place name for the other sections after the header? Body? And what if I want to use different background image on a specific page only in addition to this?

[@InsideTheSquare]

1. I use this free Chrome extension to grab that info; not affiliated - just a fan! chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff 2. Great Question! Adding code to your site-wide CSS file under design > custom CSS will put your code on every page. But there are two ways to add code to a single page - check out this tutorial for more help: insidethesquare.co/singlepage You can also use a unique block ID to target a specific thing on your site; check out this tutorial for more info: kzbin.info/www/bejne/nmnUl42alqaHmLc Hope that helps! 💙

[@MarkRuffing-x7o]

This is not working on my site for some reason and it's maddening! This is definitely on my end, but ALL of your other tutorials work fabulously, but this should be so EASY and pulling out what is left of my hair on my head, lol. Please help!

[@InsideTheSquare]

Try hopping into edit mode, and in the header design menu, under your color options, set it to opacity:0

[@centerstage.design]

Doesn't seem to be working for me on Fluid Engine...

[@InsideTheSquare]

Fluid engine is a type of page section and doesn’t affect global elements like the header. Make sure your header design set to solid or dynamic, and if the code still doesn’t work submit a code help request at insidethesquare.co/code-help

[@centerstage.design]

@@InsideTheSquare Gah! That totally fixed it. IOU!!!

[@InsideTheSquare]

In July 2022, Squarespace made a big change to the way sites are edited, and this tutorial is a little outdated! For the latest info, check out insidethesquare.co/fluid

[@MichaelBoudewyns]

Thanks for the useful video! Question: I used the code for the desktop version (SQSP 7.1, Fluid Engine), uploaded the image (made sure it was at least 3500px as you recommended) but the header background image is blurry; almost as if there is a filter over the image. Would you have any suggestions? Many thanks for your thoughts.

[@MichaelBoudewyns]

Hi again, I figured out my question. I forgot this option: Edit Site Header > Global Style > Blur Background. I had the Blur Background enabled, and no matter what I did, or how many times I followed, and re-followed, your clear instructions - I continued to get a blurry background. Now, it's good. Thanks, again, for the clear and useful videos.

[@InsideTheSquare]

Hi Michael! Glad you were able to find a fix! Working in the new platform is going to have a learning curve... one that I am excited to start talking about... tomorrow! Keep your eyes peeled for some big news coming your way. :)

[@PjSmith]

I created a landing page (removed the header and footer) and I want an image that I created in Canva to be at the top of the page. The image has text in it but I notice that the text does not compress from computer down to mobile and therefore I cannot see the text that is in the image on mobile device. What is a work around for this problem??

[@InsideTheSquare]

Hey PJ, unfortunately, CSS won't fix that because the text is static on that image. You'll need to upload the image without the text, and then you'll need to place text with some CSS 😉.

[@coltranelewis]

Hello it's working for me but i'm getting a black bar as well and the entire image isnt fitting even after compression. any suggestions?

[@InsideTheSquare]

That doesn’t sound right! I would love to help - send me more info at insidethesquare.co/code-help and I’ll hop into your source code and take a look.

[@yohanmistry2687]

Hey, how do i change the header background for individual pages in a Blog?

[@InsideTheSquare]

There are two ways to add code to a single page - check out this tutorial for more help: insidethesquare.co/singlepage

[@savethedoodle]

TY!!

[@InsideTheSquare]

You're so welcome!

[@santiagotrujillo5210]

I just followed these steps and I don't have any change. I hit save after entering the code and updating the url for my photos. Any tips?

[@santiagotrujillo5210]

I have this showing up at he bottom of the window. Expected ')' Got ''' Unsaved

[@InsideTheSquare]

Hey There! This is a pretty standard code, so I'd need to look at your code to see why it wouldn't respond. Feel free to submit a code help request here: insidethesquare.co/code-help

[@ChoonYang94]

Hello, would like to change the entire background to a image, not just the header. is there a way to do that?

[@InsideTheSquare]

Great question and yes - totally possible! Check out this tutorial for more info: insidethesquare.co/squarespace-tutorials/background-image

[@elma_gnt]

Hi, great tutorial, however it's not working for me for some reason 🤔I followed the instructions and copied the code you provided. However, I got this message at the bottom of my code saying: expected ')' got ''' , in red at the bottom left of the area where you paste codes. If it helps, I had a code already in the custom css area; it's a code to change the logo size in the header. But I copied your code in a new line.

[@InsideTheSquare]

That syntax error is asking you to close your parentheses; after your image url, do you see a spot to add a ) before any other symbols?

[@katyrosemarketing]

you need to also remove the ' marks. There are two. This will remove the error

[@englishconversationschool]

Awesome.. Please show how to create donation website

[@InsideTheSquare]

Glad you liked this video! Squarespace support has some great resources on using their donation feature - here is a link to their overview: support.squarespace.com/hc/en-us/articles/206543967

[@Masons4Liberty]

Nothing happened when I pasted this code in

[@InsideTheSquare]

Hey Chris! Squarespace made an update in July 2022 - check out the pinned comment for the details 👍👍

[@KongraDNB]

This didn't work for me, I have followed the instructions meticulously, I am frustrated!

[@InsideTheSquare]

I would be too! I just tested the code on my own site and it still works perfectly. Make sure you are using 7.1, and check out my troubleshooting tips for some ideas on what might be causing your problem: insidthesquare.co/codehelp