How to add a background image to the header in Squarespace

Jul 7

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

Pro Tip: Before we hop into this tutorial, I want to mention that I strongly recommend using an image you upload into your site files so you can make sure you have access to it; using an image hosted by someone else (Even someone as cool as unsplash.com) means that the owner could take it down or change it without you knowing; not good for a cohesive site design.

Anywho, the code from the tutorial videos is below for both 7.1 and Brine in 7.0. and if you have any questions about this tutorial let me know in the comments section!

Version 7.1

.header-announcement-bar-wrapper {background-image:url('url goes here'); background-repeat:no-repeat; background-size:cover;background-position: center;} .header {background-color:rgba(0,0,0,0)!important}

Version 7.0 - Brine Theme