⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ruclips.net/video/euJqHXs_L1M/видео.html
Did they hide this since you posted this message? I had to get to these tools from a google search. Just starting out and barely have a handle on the interface heh
Very useful, thank you. How do I get the background and header to be one image? The background only changes when the header image is visible, when I delete it the background image also goes with it.
Hey Sam! I would love to help but I'm confused about what your header image is. Can you send me a link to your site? I'll take a peek at the source code to see what is going on. You can reach me directly at support-at-insidethesquare.co
Thank you for this! Is there a way to exempt one section of this effect? I want my top section to have a different background that extends into the header.
Great question! I'd recommend creating a transparent header so the first background image shows up behind it. Here is a tutorial with more info about that setting: :ruclips.net/video/HjjM7ooxF14/видео.html
I am not quite sure what you are trying to create but I would love to help! Feel free to submit a tutorial request with more info at insidethesquare.co/suggest-tutorial
@@InsideTheSquare Thanks. I ended up altering your code a bit to let me add different background images to individual pages rather than the same image to all pages. Some pages backgrounds were controlled by #collection and some by #section. So used those tags rather than #page like in your original. For example: /* Add the image as a background*/ #collection-6487d3f267571a79526adaf6 { background-image:url(url-here); background-size: cover} or #section-6487e642320523737e10f66a { background-image:url(url-here); background-size: cover}
darn it- I've tried this several times and simply cannot figure out why this is not working on the template Live. I've weeded out the extras on the code you posted in the description, I've used exactly the code you posted in the video - yet, I can't seem to make this work.
It's hard to know what about your site is making it not work the way mine does in the video, but when you talk about "weeding out extras" 🫣 you might be missing important things like the section-border layer that needs to be transparent. If you copy the exact code & code update from the description without removing anything, and properly replaced the placeholder text with your image, and it still doesn't work, then check out my troubleshooting tips at insidethesquare.co/code-help And if you are brand new to CSS, please check out my free training for some pointers; there are rarely any "extras" in the codes I share, but there are layers to Squarespace code that you might not be aware of: insidethesquare.co/learn
I have an image that I do want to show in the section background, how do I do that AND have the page background? ooks like the .section-border{opacity:0!important} is overriding.
This code has nothing to do with those elements so i have no idea what code caused that issue. I would recommend removing whatever code you added and starting again. Best of luck!
In July 2022, Squarespace made a big change to the way sites are edited, and this tutorial is a little outdated! For the latest info, check out insidethesquare.co/fluid
That link is dead and I cannot get this figured out. Fell like I should have just made the site from the ground up using CSS/html/js rather than trying to take this shortcut. I think I have spent longer trying to figure this out that I would have if I had coded the site... Granted I want a static video that the page content scrolls past anyway not whats in the video above.
Squarespace just released a brand new feature for page sections in version 7.1 called Section Divider. I created a NEW tutorial where you'll learn how to access these new design options and what your settings are. → ruclips.net/video/VEmjqK_tj-w/видео.html
Help! I am having a hard time getting this to work .. I am working with a business account, and I would like it to only affect one page so I am putting the code in thru the Page Header Code Injection.. the image I stored in the Custom CSS under Custom Files, and copy/pasted that link in place of the "url-here" part. I hit Save on the Page Header Code, but the image is not appearing in the back of my page. Help??
It's hard to say what the issue is without seeing your code, but here are two things you can do. First, make sure your using Style brackets in your page header code, like this: css code here And secondly, test your code in your site wide css to make sure there aren't any syntax errors. if it works site wide, and you're using those brackets on your page header code injection, and it's still not working, you can also try adding !important after every value.You'll find some more troubleshooting tips here: insidethesquare.co/code-help
I don’t have the code at the bottom of my page. When i scroll all the way down all i see is my footing. Also how do i make one image on all sections. I would like to have one image and when you scroll down the page it will move with you. Thanks!
Here is the code from this tutorial; be sure to replace url-here with the url for the image you uploaded to your Squarespace site! /* Add the image as a background*/ #page{ background-image:url(url-here); background-size: cover} /* Make the page section backgrounds transparent */ #page .page-section { background: transparent!important } #page .page-section .section-background { background: transparent !important; }
Hi Armani, there are some features that just won't work on personal plans. Here is a link to the Squarespace Support article about the differences between plans and the features they offer: support.squarespace.com/hc/en-us/articles/206536797-Choosing-the-right-Squarespace-plan
Great videos learning a lot thank you can you tell me how to show up on sides and make content white? Like you did with the blog background video. thanks again
Great question! I'll have to brainstorm on this one; probably possible with some clever CSS. if I am able to create a code for it, I'm sure it will make a great tutorial so stay tuned!
Another great tutorial, Becca, thanks! This feels like a short hop, skip and jump to what I'm trying to do: Use a single background image (without repeating) across two consecutive sections. Do you know if that's possible?
Hi there - I've been able to add the background, but not the transparency effect. I've tried code injection, code blocks, main page Design CSS - nothing works. I did watch the Divider tutorial but there doesn't seem to be anything relevant in there to this issue? Do you have any advice? Thanks so much.
Great question! I have a different tutorial all about that; hope it helps with your project! insidethesquare.co/squarespace-tutorials/mobile-menu-image
Hi, I'm looking to make just one section on my site have a transparent background, I've been searching the internet for hours and this was the closest I could find but it makes all the section backgrounds transparent, I want to stop at a point and go back to having backgrounds on my sections, do you know how I could target individual sections to be transparent?
Hey Olivia! What color do you want it to be? Or are you hoping for a frosted glass look that overlays an image? Let me know and I'll find a tutorial that can help :)
This code worked perfectly a few months ago but my background image randomly disappeared a couple of weeks ago and I can't get it to work again. Were there changes made to how custom CSS works?
Hi! I love your videos. Super helpful! This may be a bit off topic, but how do you make a section that long? I am creating a site with a cutom background (like the picture) and want it larger than the sizes that they put. Is it by using a list section? Thank you!
If it's a list section, you can do a "soft return" to make extra spaces in a list item description, but if you are working with a standard page section, add a spacer block and pull the bottom of it down to the length you want to increase the size of the section. Hope that info helps!
Edit. I finally realized that this code is for full page and .header { background-image:url('image-url’); background-repeat:no-repeat; background-size:cover; background-position: center; } is for just the header. Reading and comprehending are two different things and apparently I lack the latter. Thank you for this as well but this Squarespace FE and CSS is maddening. I did what you said but now I lost the ability to have colors in sections on any of my pages. I realize that the CSS is affecting all the pages but I only need it to affect one page and I've been searching how to add code to just the pages but to no avail. Sigh. I think after doing this for 12 hours today I give on up on Squarespace. But thank you because I did learn something but I'm tired now. Appreciate all your tutorials. They will definitely help people.
The imoprtant part is that you kept working to figure it out, and I'm so glad you did! CSS is literally another language, and it can take a while to understand it. Check out my free class on CSS basics for some helpful pointers: insidethesquare.co/learn
Hi! this procedure worked fine, the image was placed but the code injection changed my footer to white colour (only in the shop page) and I can't change that. any advice? Thanks a lot 😀
Hey Carolin! Squarespace made a code change a few weeks ago - we need to add .section-border{opacity:0!important} to your code and it should be fixed. I'll put that note higher in the description for others 👍👍
⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!
To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ruclips.net/video/euJqHXs_L1M/видео.html
Did they hide this since you posted this message? I had to get to these tools from a google search. Just starting out and barely have a handle on the interface heh
Very useful, thank you. How do I get the background and header to be one image? The background only changes when the header image is visible, when I delete it the background image also goes with it.
Hey Sam! I would love to help but I'm confused about what your header image is. Can you send me a link to your site? I'll take a peek at the source code to see what is going on. You can reach me directly at support-at-insidethesquare.co
@@InsideTheSquare no worries it's sorted now. I was trying to create a splash page however it had an header image I couldn't get rid of.
Thank you for this! Is there a way to exempt one section of this effect? I want my top section to have a different background that extends into the header.
Great question! I'd recommend creating a transparent header so the first background image shows up behind it. Here is a tutorial with more info about that setting: :ruclips.net/video/HjjM7ooxF14/видео.html
Is there a way to exclude the background from certain pages?
I am not quite sure what you are trying to create but I would love to help! Feel free to submit a tutorial request with more info at insidethesquare.co/suggest-tutorial
@@InsideTheSquare Thanks. I ended up altering your code a bit to let me add different background images to individual pages rather than the same image to all pages. Some pages backgrounds were controlled by #collection and some by #section. So used those tags rather than #page like in your original. For example:
/* Add the image as a background*/
#collection-6487d3f267571a79526adaf6 {
background-image:url(url-here);
background-size: cover}
or
#section-6487e642320523737e10f66a {
background-image:url(url-here);
background-size: cover}
darn it- I've tried this several times and simply cannot figure out why this is not working on the template Live. I've weeded out the extras on the code you posted in the description, I've used exactly the code you posted in the video - yet, I can't seem to make this work.
It's hard to know what about your site is making it not work the way mine does in the video, but when you talk about "weeding out extras" 🫣 you might be missing important things like the section-border layer that needs to be transparent.
If you copy the exact code & code update from the description without removing anything, and properly replaced the placeholder text with your image, and it still doesn't work, then check out my troubleshooting tips at insidethesquare.co/code-help
And if you are brand new to CSS, please check out my free training for some pointers; there are rarely any "extras" in the codes I share, but there are layers to Squarespace code that you might not be aware of: insidethesquare.co/learn
I have an image that I do want to show in the section background, how do I do that AND have the page background? ooks like the .section-border{opacity:0!important} is overriding.
You can use an image block instead of the background so this code will still work :)
We have lost the header and footer of the specific pages where we applied this code. Could you please tell us what to do?
This code has nothing to do with those elements so i have no idea what code caused that issue. I would recommend removing whatever code you added and starting again. Best of luck!
In July 2022, Squarespace made a big change to the way sites are edited, and this tutorial is a little outdated! For the latest info, check out insidethesquare.co/fluid
That link is dead and I cannot get this figured out. Fell like I should have just made the site from the ground up using CSS/html/js rather than trying to take this shortcut. I think I have spent longer trying to figure this out that I would have if I had coded the site... Granted I want a static video that the page content scrolls past anyway not whats in the video above.
Squarespace just released a brand new feature for page sections in version 7.1 called Section Divider. I created a NEW tutorial where you'll learn how to access these new design options and what your settings are.
→ ruclips.net/video/VEmjqK_tj-w/видео.html
Help! I am having a hard time getting this to work .. I am working with a business account, and I would like it to only affect one page so I am putting the code in thru the Page Header Code Injection.. the image I stored in the Custom CSS under Custom Files, and copy/pasted that link in place of the "url-here" part. I hit Save on the Page Header Code, but the image is not appearing in the back of my page. Help??
It's hard to say what the issue is without seeing your code, but here are two things you can do. First, make sure your using Style brackets in your page header code, like this: css code here
And secondly, test your code in your site wide css to make sure there aren't any syntax errors. if it works site wide, and you're using those brackets on your page header code injection, and it's still not working, you can also try adding !important after every value.You'll find some more troubleshooting tips here: insidethesquare.co/code-help
I don’t have the code at the bottom of my page. When i scroll all the way down all i see is my footing. Also how do i make one image on all sections. I would like to have one image and when you scroll down the page it will move with you. Thanks!
Here is the code from this tutorial; be sure to replace url-here with the url for the image you uploaded to your Squarespace site!
/* Add the image as a background*/
#page{
background-image:url(url-here);
background-size: cover}
/* Make the page section backgrounds transparent */
#page .page-section {
background: transparent!important
}
#page .page-section .section-background {
background: transparent !important;
}
How can we have the same image be continuous on the header page and footer on a personal plan ? Thank you !
Hi Armani, there are some features that just won't work on personal plans. Here is a link to the Squarespace Support article about the differences between plans and the features they offer: support.squarespace.com/hc/en-us/articles/206536797-Choosing-the-right-Squarespace-plan
Great videos learning a lot thank you can you tell me how to show up on sides and make content white? Like you did with the blog background video. thanks again
Hi Pa! I'm not sure what you're asking here, but you're welcome to submit a code help request here: insidethesquare.co/code-help
Thank you so much for this! Do you happen to know if it's possible to add parallax scrolling to the individual page background images?
Great question! I'll have to brainstorm on this one; probably possible with some clever CSS. if I am able to create a code for it, I'm sure it will make a great tutorial so stay tuned!
Hello! Would this same process work with a video? I’m looking to upload a custom made video to be the background of my cover page
You should be able to!
Another great tutorial, Becca, thanks! This feels like a short hop, skip and jump to what I'm trying to do: Use a single background image (without repeating) across two consecutive sections. Do you know if that's possible?
Oooh I love this idea! I’ll definitely add this to my tutorial to-do list; stay tuned 😉
Hi there - I've been able to add the background, but not the transparency effect. I've tried code injection, code blocks, main page Design CSS - nothing works. I did watch the Divider tutorial but there doesn't seem to be anything relevant in there to this issue? Do you have any advice? Thanks so much.
That doesn’t sound right! I would love to help - send me more info at insidethesquare.co/code-help and I’ll hop into your source code and take a look.
quick question but how do i properly align it and stuff for mobile preview as its really weird on mobile preview!
Great question! I have a different tutorial all about that; hope it helps with your project!
insidethesquare.co/squarespace-tutorials/mobile-menu-image
Hi, I'm looking to make just one section on my site have a transparent background, I've been searching the internet for hours and this was the closest I could find but it makes all the section backgrounds transparent, I want to stop at a point and go back to having backgrounds on my sections, do you know how I could target individual sections to be transparent?
Hey Olivia! What color do you want it to be? Or are you hoping for a frosted glass look that overlays an image? Let me know and I'll find a tutorial that can help :)
This code worked perfectly a few months ago but my background image randomly disappeared a couple of weeks ago and I can't get it to work again. Were there changes made to how custom CSS works?
That doesn’t sound right! I would love to help - send me more info at insidethesquare.co/code-help and I’ll hop into your source code and take a look.
Hi! I love your videos. Super helpful! This may be a bit off topic, but how do you make a section that long? I am creating a site with a cutom background (like the picture) and want it larger than the sizes that they put. Is it by using a list section? Thank you!
If it's a list section, you can do a "soft return" to make extra spaces in a list item description, but if you are working with a standard page section, add a spacer block and pull the bottom of it down to the length you want to increase the size of the section. Hope that info helps!
Would "Background-size: contain" work with a video? I'm trying but still seem to be missing something. Using aspect-ratio -gets me pretty close...
Hey Mayra! Feel free to submit a code help request here: insidethesquare.co/code-help
Edit. I finally realized that this code is for full page and .header { background-image:url('image-url’); background-repeat:no-repeat; background-size:cover; background-position: center; } is for just the header. Reading and comprehending are two different things and apparently I lack the latter.
Thank you for this as well but this Squarespace FE and CSS is maddening. I did what you said but now I lost the ability to have colors in sections on any of my pages. I realize that the CSS is affecting all the pages but I only need it to affect one page and I've been searching how to add code to just the pages but to no avail. Sigh. I think after doing this for 12 hours today I give on up on Squarespace. But thank you because I did learn something but I'm tired now. Appreciate all your tutorials. They will definitely help people.
The imoprtant part is that you kept working to figure it out, and I'm so glad you did! CSS is literally another language, and it can take a while to understand it. Check out my free class on CSS basics for some helpful pointers: insidethesquare.co/learn
Hi! this procedure worked fine, the image was placed but the code injection changed my footer to white colour (only in the shop page) and I can't change that. any advice?
Thanks a lot 😀
Strange - I haven't noticed that! Feel free to email me a link to your site and I'll see what we can do about it. support-at-insidethesquare.co
why doesn't it work anymore? :( at least not for me and I did it the way you did!
Hey Carolin! Squarespace made a code change a few weeks ago - we need to add .section-border{opacity:0!important} to your code and it should be fixed. I'll put that note higher in the description for others 👍👍
@@InsideTheSquare Thank you so much!! That worked :) Can you also tell me how I can remove the header background that is still white?
@@InsideTheSquare This helped so much! Thank you!!
I must be the only one this doesn't work for.....
That doesn’t sound right! I would love to help - send me more info at insidethesquare.co/code-help and I’ll hop into your source code and take a look.