Jump to content

Image behind site header / navigation

Recommended Posts

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

Hi 

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! 

https://www.sextalkwithjordan.com/ 

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.

747969241_ScreenShot2022-02-05at8_04_14am.thumb.png.7c2b64f4a1154a37cfb85063d190849a.png

<style>
article div.section-background::before {
  content:'';
  display:block;
  position:absolute;
  top:0;
  width:100%;
  height:100px;
  background-size:fill;
  background-image:url(https://static1.squarespace.com/static/5e32931712ec0c6954f3edb0/t/61fcc321f312f47abecd8552/1643954979555/header-background-image-150high.png);
}
</style>

 

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

hey!

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

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.