Is it possible to get the image to not zoom in when using the COVER part of the code? I’ve got it covering the page but it zooms in to just a portion of the image
Becca, this was a bit rushed. You mentioned briefly how to apply this to a single section of a single page but no code. I would like to have an image behind my hero section "bleed" into the header. I feel this is the right idea. I know how to grab the section ID and apply CSS to the individual page but need the code. Perhaps add this to the video description? Love your content.
Sorry you didn't enjoy this video. When I get excited about a code I tend to talk fast, and I apologize if it was too "rushed" to follow. As always, the code is in the description below the video. To add code to a single page, check out the steps in this video: ruclips.net/video/kX6kRjCbzu8/видео.html
I have tried this and it works as intended. Although, I would like to be able to do this on a single page (my home page). Making it so that the background image fills the screen without any awkward scrolling depending on monitor size etc. Also, is there a way to select a focal point for this type of background as well?
I have added the "background-position: center" which has helped with the placement and given be the desired result in that regard, so no need to select a focal point. However, I'm still wondering if there's a way to override this background from other pages. Or if I should be using different code all together.
You can targert one page at a time using its id. Here is a tutorial with more info: ruclips.net/video/Z3k1Pzto2WU/видео.html and you can learn more about using css in my free guide to the basics available at insidethesquare.co/learn
Thanks for this. What additional elements to the code would one have to add in order to set the background as fixed/infinite scroll while covering the entire background WITHOUT repeating in 7.1. I've seen tutorials for previous version of Squarespace but not this one. Thanks in advance!
Other thing I'm curious about is adding an Overlay Color and Overlay Opacity to a background image. Happy to share a link with you if it's helpful for you to take a look at what I'm talking about.
You can use length values to set the size to 100vw & 100vh & background-size: cover to make it cover the whole thing without it moving. Keep in mind that the ratio on mobile will be different so height:auto might be your best bet here. You can also adjust the opacity using that property, but an overlay is something you can do to the image itself; only use code when you need to ;)
@@InsideTheSquare Thanks for the response! I can't quite seem to crack it 🫣. looks good on Desktop but on Mobile the image is pixelated to hell + not fixed. I'll keep fussing around with it but if you see this, can you pinpoint what I'm messing up? .site-wrapper { background-image:url(images.squarespace-cdn.com/content/v1/62201ecb0b258c55af2ca86a/f3a878d1-b95f-4dfc-af99-9eaf0d4cb6b4/redshift_album-art-1500x1500.jpg); height:auto; width:auto; background-size: cover; background-repeat: no-repeat; background-position-x: center; background-position-y: 35%; background-attachment: fixed; } .page-section .section-border, .page-section .section-background{ background-color: rgb(0,0,0,); opacity: .55; }
Hey thank you so much for this! I am running into an issue with the mobile version. It's showing the left side of the image instead of auto adjusting to center the page. Please help :)
Try adding background-position: center to your code, like this: .site-wrapper { background-image:url(url-here); background-size: contain; background-position: center }
@@InsideTheSquare Hi ! I have the same issue, I've tried to add this background position center thing but it doesn't seam to work, do you have another option ? Thanks :)
Can you please do a video showing how to change the website header language manually (not using Weglot or anything I'm doing manual translation). Trying to make a multi lingual website manually cuz im trying to avoid paying a lot more money.
Intersting question. It would be a lot of work, but technically you could make a page section that looks & acts like your page header with a logo and links for buttons in that second language, save it to your saved sections, then on specific pages, hide the header in the page sections settings and place your second language header at the top of the page. Just make sure all the links in your second header go to the other language pages, and be mindful that the footer will appear on all pages. Hope taht concept helps and best of luck with your project!
Great question and yes! I'll have to do a full tutorial of this someday, but for now, here is a code you can get started with: .site-wrapper { background-image:url(image-url-here); background-attachment: fixed!important; background-position: center!important; background-repeat: no-repeat!important; background-size: cover!important; background-attachment: scroll!important; }
That is so frustrating! Let's see if we can get that image to stretch! Take a look at your site margin that you’ve selected in your site style menu, and try to compensate with code. For example, if you have a big site margin of 5vw, make the width 110% and pull the image over with a negative side margin like margin-left: -5vw If that doesn’t fix it, post a link and I’ll dig into your source code to see what’s going on inside your site.
Hey Becca, I'm considering designing a long vertical image to serve as the background for my Squarespace website. I want it to seamlessly flow across different sections, creating a cohesive and visually appealing backdrop. Any tips on how I can measure or estimate the size of the image to achieve this effect? Oh and I love your exited and uplifting voice!
This is such a fantastic and fantastically complicated question!! The trickiest part is not knowing how many sections there will be, so we can't know the appropriate ratio. I would suggest creating a 9:6 ratio (double a 9:16 presentation view) background pattern that can repeat so it's going to look great stretch full width on large screens with shorter content than a mobile screen, where the content is going to take up more page height. Hope that workaround explanation makes sense, and best of luck with your project!
Hi Becca, I'm pulling my hair out trying to have a background image fit over two sections, because if I upload it separately to each section you can tell it is not joined....this is the closest video I found to that. Do you have any custom CSS code I could use?
Interesting! I have an alternative idea for ya - make the first of the two sections twice as big as it needs to be in height using the editor, then use CSS to make the background of section two transparent and pull it up with a negative top margin. For example, assuming the sections are the same height: [second-section-id].page-section { margin-top:-100%; z-index:999!important } [section-section-id].page-section .section-border{ opacity:0 } I hope that info helps! If you need a custom tutorial, email me: hello-at-insidethesquare.co
![[04] Website Essentials: Layout, Header & Footer](http://i.ytimg.com/vi/KKnFuAWtvk0/mqdefault.jpg)
![[04] Website Essentials: Layout, Header & Footer](/img/tr.png)
![Weekly Art Vlog #1 [New Setup!!]](http://i.ytimg.com/vi/0hMaEda3rAQ/mqdefault.jpg)
Great stuff Becca - really appreciate your videos!
Thanks for letting me know; I'm glad you like them! 🥰
Excellent tutorial AGAIN Becca! Thank you! Would this code work for the default Art backgrounds?
That's a great question! Some of those art background will overwrite this; i recommend picking one or the other.
Is it possible to get the image to not zoom in when using the COVER part of the code? I’ve got it covering the page but it zooms in to just a portion of the image
Hi! Wondering what template you started with to get these options- Can you share?
I'm using version 7.1 so the template you start with doesn't matter - they all have the same features & respond to the same codes! :)
Becca, this was a bit rushed. You mentioned briefly how to apply this to a single section of a single page but no code. I would like to have an image behind my hero section "bleed" into the header. I feel this is the right idea. I know how to grab the section ID and apply CSS to the individual page but need the code. Perhaps add this to the video description? Love your content.
Sorry you didn't enjoy this video. When I get excited about a code I tend to talk fast, and I apologize if it was too "rushed" to follow. As always, the code is in the description below the video. To add code to a single page, check out the steps in this video: ruclips.net/video/kX6kRjCbzu8/видео.html
I have tried this and it works as intended. Although, I would like to be able to do this on a single page (my home page). Making it so that the background image fills the screen without any awkward scrolling depending on monitor size etc. Also, is there a way to select a focal point for this type of background as well?
I have added the "background-position: center" which has helped with the placement and given be the desired result in that regard, so no need to select a focal point. However, I'm still wondering if there's a way to override this background from other pages. Or if I should be using different code all together.
You can targert one page at a time using its id. Here is a tutorial with more info: ruclips.net/video/Z3k1Pzto2WU/видео.html and you can learn more about using css in my free guide to the basics available at insidethesquare.co/learn
Thanks for this. What additional elements to the code would one have to add in order to set the background as fixed/infinite scroll while covering the entire background WITHOUT repeating in 7.1. I've seen tutorials for previous version of Squarespace but not this one. Thanks in advance!
Other thing I'm curious about is adding an Overlay Color and Overlay Opacity to a background image. Happy to share a link with you if it's helpful for you to take a look at what I'm talking about.
You can use length values to set the size to 100vw & 100vh & background-size: cover to make it cover the whole thing without it moving. Keep in mind that the ratio on mobile will be different so height:auto might be your best bet here. You can also adjust the opacity using that property, but an overlay is something you can do to the image itself; only use code when you need to ;)
@@InsideTheSquare Thanks for the response! I can't quite seem to crack it 🫣. looks good on Desktop but on Mobile the image is pixelated to hell + not fixed. I'll keep fussing around with it but if you see this, can you pinpoint what I'm messing up?
.site-wrapper {
background-image:url(images.squarespace-cdn.com/content/v1/62201ecb0b258c55af2ca86a/f3a878d1-b95f-4dfc-af99-9eaf0d4cb6b4/redshift_album-art-1500x1500.jpg);
height:auto;
width:auto;
background-size: cover;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 35%;
background-attachment: fixed;
}
.page-section .section-border, .page-section .section-background{
background-color: rgb(0,0,0,);
opacity: .55;
}
Hey thank you so much for this! I am running into an issue with the mobile version. It's showing the left side of the image instead of auto adjusting to center the page. Please help :)
Try adding background-position: center to your code, like this:
.site-wrapper {
background-image:url(url-here);
background-size: contain;
background-position: center
}
@@InsideTheSquare Hi ! I have the same issue, I've tried to add this background position center thing but it doesn't seam to work, do you have another option ? Thanks :)
Can you please do a video showing how to change the website header language manually (not using Weglot or anything I'm doing manual translation). Trying to make a multi lingual website manually cuz im trying to avoid paying a lot more money.
Intersting question. It would be a lot of work, but technically you could make a page section that looks & acts like your page header with a logo and links for buttons in that second language, save it to your saved sections, then on specific pages, hide the header in the page sections settings and place your second language header at the top of the page. Just make sure all the links in your second header go to the other language pages, and be mindful that the footer will appear on all pages. Hope taht concept helps and best of luck with your project!
This is so useful!! Is there a way I can make the image have the parallax instead?
Great question and yes! I'll have to do a full tutorial of this someday, but for now, here is a code you can get started with:
.site-wrapper {
background-image:url(image-url-here);
background-attachment: fixed!important;
background-position: center!important;
background-repeat: no-repeat!important;
background-size: cover!important;
background-attachment: scroll!important;
}
my image will not cover sides of the website.. it is not stretching in width to occupy whole screen
That is so frustrating! Let's see if we can get that image to stretch! Take a look at your site margin that you’ve selected in your site style menu, and try to compensate with code. For example, if you have a big site margin of 5vw, make the width 110% and pull the image over with a negative side margin like margin-left: -5vw
If that doesn’t fix it, post a link and I’ll dig into your source code to see what’s going on inside your site.
Do you have one of these for Squarespace 7.0? Specifically the brine family?
I do not - but the Squarespace support channel does! ruclips.net/video/FeHas5SEg04/видео.html
Hello, is there a way to freeze the background in place and only have the content move?
Great question - and yes! Set your background postion to fixed, like this: position:fixed!important
Love this tutorial, however it didn't add the image to my footer. Any idea what I have wrong?
It's hard to say without seeing your site; feel free to post a link here and I will take a look 👀
Hey Becca, I'm considering designing a long vertical image to serve as the background for my Squarespace website. I want it to seamlessly flow across different sections, creating a cohesive and visually appealing backdrop. Any tips on how I can measure or estimate the size of the image to achieve this effect?
Oh and I love your exited and uplifting voice!
This is such a fantastic and fantastically complicated question!! The trickiest part is not knowing how many sections there will be, so we can't know the appropriate ratio. I would suggest creating a 9:6 ratio (double a 9:16 presentation view) background pattern that can repeat so it's going to look great stretch full width on large screens with shorter content than a mobile screen, where the content is going to take up more page height. Hope that workaround explanation makes sense, and best of luck with your project!
@@InsideTheSquare Thank you for your answer, would you consider making a tutorial about this?
Hi Becca,
I'm pulling my hair out trying to have a background image fit over two sections, because if I upload it separately to each section you can tell it is not joined....this is the closest video I found to that. Do you have any custom CSS code I could use?
Interesting! I have an alternative idea for ya - make the first of the two sections twice as big as it needs to be in height using the editor, then use CSS to make the background of section two transparent and pull it up with a negative top margin.
For example, assuming the sections are the same height:
[second-section-id].page-section {
margin-top:-100%;
z-index:999!important
}
[section-section-id].page-section .section-border{
opacity:0
}
I hope that info helps! If you need a custom tutorial, email me: hello-at-insidethesquare.co