Get FREE access to my Private Facebook Group and a FREE eBook outlining the 5 steps you can accomplish right now to take your Squarespace Website to the next level 👉 www.rebeccagracedesigns.com/squarespace-tips-and-tricks
Worked great! Needed to adjust the image size to fit for both mobile and tablet but this absolutely worked and allowed me to stick with the approved imagery!
Hi, thank you Rebecca. I and others in the comment sections have experienced the same background issue. I have taken time to solve it so you don't have to. Kindly add: max-height: 215px to the code. You can change the number before px as you see fit, the image will change in real time until you have what you want.
This worked great but I'm still seeing the original zoomed in image behind it. I also have text overlay that is too large and dragging down from the original image. Any ideas on what I could try? Thank you so much!
Hello Tatiana. I am not sure I understand what you mean by a text overlay, but I would set the background to 100% 100%. This can however cause your image to stretch funny. If you would like some help to see your options, I would be happy to assist in a 1:1 Help Session. You can find out more and book a call time at www.rebeccagracedesigns.com/coaching
Hi Rebecca, I did find your tutorial much interesting! I did try your code but unfortunately, my page URL is not only one word but is of the type /lg/page, so I cannot write simply #page and #lg/page gives me an error. Any chance you know how to address that page in that case? Thank you in advance for your help.
@@RebeccaGraceDesigns Hi Rebecca, thank you for your advice. Unfortunately, although the image of the banner disappears, now the image I specify in the URL as mobile option is not showing. I just have a white background. I appreciate your precious time! Thank you!
Hi Becca, is there a way to apply this to a gallery banner? I have a Index page with a gallery as my home page. can i change it so that on mobile it just shows one static image?
The code would be a little different from what is in this video. You would have to hide the gallery instead of images, then set the background image. I would be happy to work with you on this during a 1:1 Help Session. You can find out more at www.rebeccagracedesigns.com/coaching
Love the tutorial! It's exactly what I need! But when I tried it on my site, the image was still cropped. Like it didn't show the entire image like it does in your video. It kind of just filled the banner space with the new image while cropping off the bottom half of it. Do you know why this might be happening? My image size is 900 x 1200 pixels.
@@RebeccaGraceDesigns I'm using it as a banner on an index page, so yes, it crops it before the next section of the index. But the height of the actual banner container doesn't adjust vertically on mobile to show the full image. It says horizontally oriented (like for desktop) therefore cropping the image, even though the image is a vertically oriented image.
@@RebeccaGraceDesigns So that did work! Thanks! The only downside is that when Parallax scrolling is enabled, I can still see the original image underneath. Like, the original banner image is in the background and the the mobile image is sitting on top. When I disable Parallax scrolling, the original banner image disappears but I would like to keep Parallax scrolling enabled. Is there a workaround this?
@@Mfalconer It sounds like the #pagename img { display:none;} is not working. Delete out all the code except this section. All of your images should disappear. Then add the other code back in.
Hello Rebecca. Would this work on any page? Or just an index page only? I'm trying to get it working on Version 7.0- Brine family (Sonora template) and the image stays the same no matter which image I use for the 'IMAGEURL'
Hey Rebecca! Thank you for this code. I'm using a template from the Brine family and only the second part of the code is working (changing the color). The hiding of the image isn't working. Could you please help? Thank you!
Hello Viveca. I know we worked on this together in my Facebook Group but I will put the answer here as well for others. Depending on the Template, you may not be able to hide the background image. A workaround would be to create two different pages or sections; one for desktop and one for mobile. Then hide one on desktop and the other on mobile. Just be careful to not use this technique too often as it can slow down your page and negatively impact SEO.
@@RebeccaGraceDesigns it just doesn’t make any changes. I think there might be some conflict with another css I use to make my header background transparent.
It could be. It's possible that you have the wrong page id as well. I would be happy to help on a 1:1 Help Session. You can find out more and book a call time at www.rebeccagracedesigns.com/coaching
Hi Rebecca, thank you for this video!! For some reason it's not showing the new image I'm using on the mobile bit. When I copied over the code it was all bunched up so I tried to enter gaps like yours. Could that be the reason it's not working? /* CSS FOR TABLET AND MOBILE */ @mobile: ~"only screen and (max-width: 640px)"; @tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)"; /* CSS FOR TABLET */ @media @tablet { /* Insert Code for Tablet Below This Line*/
/* Insert Code for Tablet Above This Line */ } /* CSS FOR MOBILE */ @media @mobile { /* Insert Code for Mobile Below This Line*/ #story img { display: none; } #story .sqs-block-image img { display: block; } #story { background: url('images.squarespace-cdn.com/content/5a6a07edf14aa15c1ea560a5/1597078433625-Z0GEXJPUY4HD715HB17T/Garden16.jpg?format=1500w&content-type=image%2Fjpeg'); background-repeat: no-repeat; background-size: 100%; } /* Insert Code for Mobile Above This Line */ }
Hello Nellie! Some 7.0 templates are resistant to this technique. If the code is not working at all and you are sure you are using the right #pagename, then it's possible this technique will not work for you. Another option (although it should be used sparingly) is to create two sections; one for mobile and one for desktop. Then hide one when on mobile and the other on desktop.
@@marianobaltazar9644 replace the #pageurl with the id. Depending on the Template, you may not be able to hide the background image. A workaround would be to create two different pages or sections; one for desktop and one for mobile. Then hide one on desktop and the other on mobile. Just be careful to not use this technique too often as it can slow down your page and negatively impact SEO.
Hi Rebecca, thanks so much for this video! Unfortunately when I follow these steps it doesn't seem to work at all? I've implemented the below code, but it doesn't make a difference. Could it be because of the template 'Bedford' that I'm using? Code used (website: www.embracekeratin.com) : /* CSS FOR TABLET AND MOBILE */ @mobile: ~"only screen and (max-width: 640px)"; @tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)"; /* /* CSS FOR TABLET */ @media @tablet { /* Insert Code for Tablet Below This Line*/ /* Insert Code for Tablet Above This Line */ } /* CSS FOR MOBILE */ @media @mobile { /* Insert Code for Mobile Below This Line*/ #home img { display: none; } #home .sqs-block-image img { display: block; } #home { background: url('static1.squarespace.com/static/5d8bbd6cd46259208da1c786/t/5e0ba5f9bb6d5e7d7049d49b/1577821699741/Mobile+Banner.png'); background-repeat: no-repeat; background-size: 100%; } /* Insert Code for Mobile Above This Line */ }
@@missbunz1776 Amazing! Thank you so much, this worked to 'hide' the banner, but unfortunately it's still not showing the new photo- can you see anything else? /* CSS FOR TABLET AND MOBILE */ @mobile: ~"only screen and (max-width: 640px)"; @tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)"; /* /* CSS FOR TABLET */ @media @tablet { /* Insert Code for Tablet Below This Line*/ /* Insert Code for Tablet Above This Line */ } /* CSS FOR MOBILE */ @media @mobile { /* Insert Code for Mobile Below This Line*/ #collection-5d98d5f61c14632076e4d7e4 img { display: none; } #collection-5d98d5f61c14632076e4d7e4 .sqs-block-image img { display: block; } #collection-5d98d5f61c14632076e4d7e4 { background: url('static1.squarespace.com/static/5d8bbd6cd46259208da1c786/t/5e0ba5f9bb6d5e7d7049d49b/1577821699741/Mobile+Banner.png'); background-repeat: no-repeat; background-size: 100%; } /* Insert Code for Mobile Above This Line */ }
Get FREE access to my Private Facebook Group and a FREE eBook outlining the 5 steps you can accomplish right now to take your Squarespace Website to the next level 👉 www.rebeccagracedesigns.com/squarespace-tips-and-tricks
Worked great! Needed to adjust the image size to fit for both mobile and tablet but this absolutely worked and allowed me to stick with the approved imagery!
Glad it helped!
Hi, thank you Rebecca. I and others in the comment sections have experienced the same background issue.
I have taken time to solve it so you don't have to. Kindly add: max-height: 215px to the code. You can change the number before px as you see fit, the image will change in real time until you have what you want.
Thank you for this solution. I will check it out!
Thank you so much for sharing this! It's worked!! Such a life saver!
Glad it helped!
Awesome video thanks for the easy fix!
You're welcome!
Thank you Rebecca! This totally worked:))
You're so welcome!
This worked great but I'm still seeing the original zoomed in image behind it. I also have text overlay that is too large and dragging down from the original image. Any ideas on what I could try? Thank you so much!
Hello Tatiana. I am not sure I understand what you mean by a text overlay, but I would set the background to 100% 100%. This can however cause your image to stretch funny. If you would like some help to see your options, I would be happy to assist in a 1:1 Help Session. You can find out more and book a call time at www.rebeccagracedesigns.com/coaching
Hi Rebecca, I did find your tutorial much interesting! I did try your code but unfortunately, my page URL is not only one word but is of the type /lg/page, so I cannot write simply #page and #lg/page gives me an error. Any chance you know how to address that page in that case? Thank you in advance for your help.
Hello Simone. It would be the page id name. To find this you would have to use Chrome Inspect Tools to see what your page's id is.
@@RebeccaGraceDesigns Hi Rebecca, thank you for your advice. Unfortunately, although the image of the banner disappears, now the image I specify in the URL as mobile option is not showing. I just have a white background. I appreciate your precious time! Thank you!
How do you get this photo to show up only on a certain page for squarespace?
Make sure you are using the collection id for the page that you want to apply it to.
Hi Becca, is there a way to apply this to a gallery banner? I have a Index page with a gallery as my home page. can i change it so that on mobile it just shows one static image?
The code would be a little different from what is in this video. You would have to hide the gallery instead of images, then set the background image. I would be happy to work with you on this during a 1:1 Help Session. You can find out more at www.rebeccagracedesigns.com/coaching
Love the tutorial! It's exactly what I need! But when I tried it on my site, the image was still cropped. Like it didn't show the entire image like it does in your video. It kind of just filled the banner space with the new image while cropping off the bottom half of it. Do you know why this might be happening? My image size is 900 x 1200 pixels.
Hello Melissa, is it cropping the image to start the next section of your webpage or does it fill the full viewing height?
@@RebeccaGraceDesigns I'm using it as a banner on an index page, so yes, it crops it before the next section of the index. But the height of the actual banner container doesn't adjust vertically on mobile to show the full image. It says horizontally oriented (like for desktop) therefore cropping the image, even though the image is a vertically oriented image.
@@Mfalconer Under Site Styles, try setting a minimum height of 100vh for the first page or pages with a banner image.
@@RebeccaGraceDesigns So that did work! Thanks! The only downside is that when Parallax scrolling is enabled, I can still see the original image underneath. Like, the original banner image is in the background and the the mobile image is sitting on top. When I disable Parallax scrolling, the original banner image disappears but I would like to keep Parallax scrolling enabled. Is there a workaround this?
@@Mfalconer It sounds like the #pagename img { display:none;} is not working. Delete out all the code except this section. All of your images should disappear. Then add the other code back in.
Hello Rebecca. Would this work on any page? Or just an index page only? I'm trying to get it working on Version 7.0- Brine family (Sonora template) and the image stays the same no matter which image I use for the 'IMAGEURL'
It should work on any page but you may have to customize it slightly depending on how you have built the other pages.
Hey Rebecca! Thank you for this code. I'm using a template from the Brine family and only the second part of the code is working (changing the color). The hiding of the image isn't working. Could you please help? Thank you!
Hello Viveca. I know we worked on this together in my Facebook Group but I will put the answer here as well for others. Depending on the Template, you may not be able to hide the background image. A workaround would be to create two different pages or sections; one for desktop and one for mobile. Then hide one on desktop and the other on mobile. Just be careful to not use this technique too often as it can slow down your page and negatively impact SEO.
Unfortunately it is not working for 7.0 Brine Ethan template :/
Can you further explain what is not working? Do you see the old image disappear on mobile?
@@RebeccaGraceDesigns it just doesn’t make any changes. I think there might be some conflict with another css I use to make my header background transparent.
It could be. It's possible that you have the wrong page id as well. I would be happy to help on a 1:1 Help Session. You can find out more and book a call time at www.rebeccagracedesigns.com/coaching
Hi Rebecca, thank you for this video!! For some reason it's not showing the new image I'm using on the mobile bit. When I copied over the code it was all bunched up so I tried to enter gaps like yours. Could that be the reason it's not working?
/* CSS FOR TABLET AND MOBILE */
@mobile: ~"only screen and (max-width: 640px)";
@tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)";
/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/
/* Insert Code for Tablet Above This Line */
}
/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
#story img {
display: none;
}
#story .sqs-block-image img {
display: block;
}
#story {
background: url('images.squarespace-cdn.com/content/5a6a07edf14aa15c1ea560a5/1597078433625-Z0GEXJPUY4HD715HB17T/Garden16.jpg?format=1500w&content-type=image%2Fjpeg');
background-repeat: no-repeat;
background-size: 100%;
}
/* Insert Code for Mobile Above This Line */
}
Hello Nellie! Some 7.0 templates are resistant to this technique. If the code is not working at all and you are sure you are using the right #pagename, then it's possible this technique will not work for you. Another option (although it should be used sparingly) is to create two sections; one for mobile and one for desktop. Then hide one when on mobile and the other on desktop.
Hey Rebecca, it worked for me but I still have the pc cover behind my mobile cover don't know why:s HELP!
Hello Gabriela. You will have to use Chrome Developer Tools to find the class for your pc cover and then apply display:none;
@@RebeccaGraceDesigns I found the class id, but how do I code it?
@@marianobaltazar9644 replace the #pageurl with the id. Depending on the Template, you may not be able to hide the background image. A workaround would be to create two different pages or sections; one for desktop and one for mobile. Then hide one on desktop and the other on mobile. Just be careful to not use this technique too often as it can slow down your page and negatively impact SEO.
Rebecca Grace Designs I'm assuming it won't hide the image with a Brine template, correct?
Hi what is the code?
You can find a link to the code in the video description.
Hi Rebecca, thanks so much for this video! Unfortunately when I follow these steps it doesn't seem to work at all? I've implemented the below code, but it doesn't make a difference. Could it be because of the template 'Bedford' that I'm using?
Code used (website: www.embracekeratin.com) :
/* CSS FOR TABLET AND MOBILE */
@mobile: ~"only screen and (max-width: 640px)";
@tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)";
/*
/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/
/* Insert Code for Tablet Above This Line */
}
/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
#home img {
display: none;
}
#home .sqs-block-image img {
display: block;
}
#home {
background: url('static1.squarespace.com/static/5d8bbd6cd46259208da1c786/t/5e0ba5f9bb6d5e7d7049d49b/1577821699741/Mobile+Banner.png');
background-repeat: no-repeat;
background-size: 100%;
}
/* Insert Code for Mobile Above This Line */
}
@@missbunz1776 Amazing! Thank you so much, this worked to 'hide' the banner, but unfortunately it's still not showing the new photo- can you see anything else?
/* CSS FOR TABLET AND MOBILE */
@mobile: ~"only screen and (max-width: 640px)";
@tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)";
/*
/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/
/* Insert Code for Tablet Above This Line */
}
/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
#collection-5d98d5f61c14632076e4d7e4 img {
display: none;
}
#collection-5d98d5f61c14632076e4d7e4 .sqs-block-image img {
display: block;
}
#collection-5d98d5f61c14632076e4d7e4 {
background: url('static1.squarespace.com/static/5d8bbd6cd46259208da1c786/t/5e0ba5f9bb6d5e7d7049d49b/1577821699741/Mobile+Banner.png');
background-repeat: no-repeat;
background-size: 100%;
}
/* Insert Code for Mobile Above This Line */
}
Hello! It seems like the page id for this section is not home. Try putting #collection-5d98d5f61c14632076e4d7e4 instead of #home