Set a background-image on the #header element to add a custom background. Use background-size: cover and background-position: center to ensure it fills the header properly.
Add a semi-transparent overlay using ::before so your navigation text stays readable against the image. Host the image through Squarespace's asset CDN or an external URL.
#header {
background-image: url('YOUR_IMAGE_URL') !important;
background-size: cover;
background-position: center;
position: relative;
}
/* Dark overlay for text readability */
#header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 0;
}
/* Keep nav content above overlay */
#header .header-inner {
position: relative;
z-index: 1;
}Find header CSS patterns in our CSS CheatsheetTry it free →
