Image behind site header / navigation

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 image

Homepage with "blank" section with background image, this is (pretty much) how I want it site wide. Ideally the spacing would be better.

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.

<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>

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.

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.

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!

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.