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>