Adding a background image to whole site, except for certain sections

https://fiddle-smilodon-edwr.squarespace.com

pw: cacao

i'm trying to add a background image to the whole site, however i would like the ability to be able to override this on particular sections. for example, the landing page needs to be a background video on the section.

here's the code i've used:

//sitewide background//

/* squarespace update in 2023 - not in the video but important */
.section-border{opacity:0!important} 

/* Add the image as a background*/
#page{
background-image:url('https://static1.squarespace.com/static/6639ebbe85308a07d61c5fb2/t/663a0210cacb06278faa298d/1715077650374/background.jpg');
background-size: repeat;}

/* Make the page section backgrounds transparent */
#page .page-section {
background: transparent;
}
#page .page-section .section-background {
background: transparent;
}
 

5 minutes ago, HimanshuYadav said:

@moonlitdesign Please use this code add for a background image to the whole site.

 

#page {
    position: relative;
}
#page:before {
    content: '';
    background-image: url(https://static1.squarespace.com/static/6639ebb…/t/663a021…/1715077650374/background.jpg);
    background-size: cover;
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
}

 

thank you for this variation and your time! however sadly it hasn't worked!

@moonlitdesign Sorry for that, I got It.
First you need to previous added remove code. Please check the screenshot.
In second step, You need to add my code. Then you will got changes definitely.

9 minutes ago, HimanshuYadav said:

@moonlitdesign Sorry for that, I got It.
First you need to previous added remove code. Please check the screenshot.
In second step, You need to add my code. Then you will got changes definitely.

thank you so much, I actually played with a work around where I just completely lowered the  background opacity in site styles instead and your code seems to work perfectly that way 🙂

3 hours ago, moonlitdesign said:

thank you so much, I actually played with a work around where I just completely lowered the  background opacity in site styles instead and your code seems to work perfectly that way 🙂

hey @HimanshuYadav i've just added my navigation styling and it appears the background is missing on that too, it should be green. is there any way to fix? 

thanks !

@moonlitdesign Sure, We can do It. Everything is possible 🙂

Please use this extra code. Please put this code blow the previous code.

 

@media screen and (min-width: 992px) {
	#page:before {
	    max-width: 75%;
	    margin-left: 25%;
	}
}

1 hour ago, HimanshuYadav said:

@moonlitdesign Sure, We can do It. Everything is possible 🙂

Please use this extra code. Please put this code blow the previous code.

 

@media screen and (min-width: 992px) {
	#page:before {
	    max-width: 75%;
	    margin-left: 25%;
	}
}

 

genius thank you!!!!! really appreciate it!!!!

sorry to ask another question haha, is there now a way to reduce the width of the header nav and get the long menu item to stack ?

thank you!

52 minutes ago, moonlitdesign said:

genius thank you!!!!! really appreciate it!!!!

sorry to ask another question haha, is there now a way to reduce the width of the header nav and get the long menu item to stack ?

thank you!

Thanks for appreciating!
I can fixed It and share the CSS code but It's not a proper way. please fix it login with squarespace and change the universal width for left side header on web view.

@moonlitdesign Otherwise, to more help you can email/message on this E-mail 'himanshu.devops@gmail.com'.