⚠ 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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-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
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?
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: :ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HjjM7ooxF14.html
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! 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!
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
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!
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!
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?
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! 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 😀
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 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.
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 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.
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 :)
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 👍👍
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. → ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-VEmjqK_tj-w.html
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.
