Jump to content

Image behind site header / navigation

Recommended Posts

Site URL: https://www.sextalkwithjordan.com/


Is there a way to set an image as the background for the site header / navigation? I have a blog on 7.1 and so far the only thing I can figure out is to add a blank section at the top of the page (w/ a spacer bar in it) and set the background to the picture I want so it bleeds up into the navigation but that also makes the spacing a little weird and then there is no way to then do this to the blog category pages that are linked in my navigation or the individual blog post page. I feel like I am missing something simple here. Any help would be GREATLY appreciated! 


Blog category page with no header nav background imageScreen Shot 2022-02-04 at 8.35.48 am.png

Homepage with "blank" section with background image, this is (pretty much) how I want it site wide. Ideally the spacing would be better.Screen Shot 2022-02-04 at 8.36.16 am.png

Edited by JordanKH
adding more information
Link to comment

Ok now I have used this code from @iamdavehart  in settings > advanced > code injection, which has done exactly what I wanted, putting the image behind the header / nav bar but it also puts it on top of each new section. This only really effects my home page and I have been able to just upload a blank colour image as the background to cover it but if anyone knows how I can tweak it to just sit at the top of the page and not repeat for each section, that would be amazing. 

Screenshot of the image from the code sitting in the top of my CTA section.


article div.section-background::before {


Link to comment
On 2/5/2022 at 10:06 AM, iamdavehart said:


change the selector to target only the section-background of the first section. just add section:nth-child(1) to your existing code like this:

article section:nth-child(1) div.section-background::before {

hope that helps.


THANK YOU! You're an angel.

Link to comment
  • 1 year later...

Hi all, I'm pitching up on this year-old thread because the above code saved me and allowed the background in my autoplay carousel to go behind the nav, however the code is impacting the colour of the social icons and buttons on my site and won't let them be anything other than black. Does anyone who what I need to add/could add to the code above to stop this happening and allow my buttons/links/icons to be white and note black? Thanks!

Screenshot 2023-03-07 at 14.45.04.png

Link to comment
5 hours ago, ElizaLewis said:

however the code is impacting the colour of the social icons and buttons on my site and won't let them be anything other than black.

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.