Jump to content

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

Go to solution Solved by HimanshuYadav,

Recommended Posts

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

 

Link to comment
  • Solution

@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%;
}

 

Link to comment
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!

Link to comment
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.
image.thumb.png.975c17c749a29fe80a0dab8344395954.png

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 🙂

Link to comment
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 !

image.thumb.png.02ed8388727d8aa2b1e83e9baa6a0766.png

 

Link to comment
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 ?

image.thumb.png.d9630bfdd7a1af577eeac28e6cb88f7a.png

thank you!

Link to comment
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 ?

image.thumb.png.d9630bfdd7a1af577eeac28e6cb88f7a.png

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.

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.