JordanKH Posted February 3, 2022 Share Posted February 3, 2022 (edited) 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. Edited February 3, 2022 by JordanKH adding more information Link to comment
JordanKH Posted February 4, 2022 Author Share Posted February 4, 2022 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> Link to comment
iamdavehart Posted February 5, 2022 Share Posted February 5, 2022 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. JordanKH 1 Dave Hart. Software/Technology Consultant living in London. buymeacoffee Link to comment
JordanKH Posted February 6, 2022 Author Share Posted February 6, 2022 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
ElizaLewis Posted March 7, 2023 Share Posted March 7, 2023 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! Link to comment
creedon Posted March 7, 2023 Share Posted March 7, 2023 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment