Search code examples
cssnavigationheaderbackground-imagesquarespace

Add background image to squarespace website header

I'm attempting to add a background image to the header in a Squarespace website I'm working on. I've managed to have some success with the following code suggested in their forum:

header#header {
    background-image: url(Image URL Here);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

However I it only covers the main navigation area not the entire header area. I'd like it to look something like this:

Header Example

However instead it looks like this in this example page I've added the code to:

https://matthew-kern-drzz.squarespace.com/paintings-new

Does anyone have a solution?

Cheers,

M.

P.S. I added the code to this page only by going to Design>>CSS and then inserting the CSS with the page's collection ID:

#collection-6058d724f45e96664a810213 header#header {
    background-image: url(https://www.emergentcreative.co.uk/wp-content/uploads/2021/04/Gart-BG-Header-Example-1-2.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
Solution

  • After carefully viewing your website https://matthew-kern-drzz.squarespace.com/paintings-new, I noticed that the website is wrapped in <div class="canvas"> which has css

    #canvas {
    max-width: 1200px;
    margin: 0px auto;
    padding: 75px;
}

    The padding: 75px creates the spaces around the contents on the website that made your header to have the spaces around it, to handle this and achieve what you want, add this CSS code to the header element

    #header{
    position: absolute;
    top: 0;
    right: 0;
    margin-bottom: 9px;
}