Jump to content

Search the Community

Showing results for tags 'background'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Hello! 👋 I am having an issue with parallax scrolling for background images. It seems that the issue arose about the same time that SS had headers and footers disappearing/changing colors. According to the SS status page, the header/footer issue had been fixed but apparently that fix caused the following code to stop working altogether. The problem is that, when I put the following code into the Settings > Advanced > Code Injection > Footer section, all of my background images completely disappear. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> <script> $('.has-background:not(:has(.sqs-video-background))').each(function() { var findImage = $(this).find('.section-background img'); var imgUrl = findImage.data('src') + '?format=2500w'; var dimensions = findImage.data('image-dimensions'); var imgWidth = dimensions.substr(0, dimensions.indexOf('x')); var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1); $(this).parallax({ imageSrc: imgUrl, naturalWidth: imgWidth, naturalHeight: imgHeight, speed: .5, }) }); document.getElementsByTagName("body")[0].onresize = function() { setTimeout(function() { jQuery(window).trigger('resize').trigger('scroll') }, 100) }; </script> <style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}main .has-background.background-width--inset{margin:4vw;padding:0!important}main .has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}.sqs-catalog .section-background img{visibility:visible!important;}.has-background .section-background .sqs-video-background img{visibility:visible!important}</style> I have been using the code above flawlessly on multiple sites for some time without a hiccup until recently. I tried using SS built-in parallax engine for my background images but it isn't nearly as smooth as what the above code did for background images. My websites just aren't the same without it. I have also tried other similar bits of code that is supposed to do the same thing (actually, used to do the same thing before the SS header/footer issue) as the above code but those will not work either. I was wondering if anyone has had similar issues as I am having or maybe someone could look at the code above to see what might be causing the background images to completely disappear? Thanks in advance for your time! Website: https://cello-dachshund-wage.squarespace.com/config/ Password: WCB2022
  2. When using a youtube link as a background video in a section, the title of the video appears in the top left for a few seconds once it begins playing, as well as a 'copy link' icon on the top right. Its distracting and makes the site look cheap, in my opinion. I'd love to have the video load without the title and 'copy link' icon appearing. Anything I can add or change in the link itself to do so? Thanks! N
  3. I'm sure this isn't an unique question but I have custom background images on my "Us" and "Talk/Contact" pages as well as text that is sized to fit the images on those pages. I also have a custom background video on my home page. On desktop, they look fine but on mobile the imagery and text are off. Is there a CSS code I can add that will resolve this? Here's the domain: circle-strawberry-bll9.squarespace.com
  4. Hello! I've added an image to my website that is in PNG format, with transparency but for some reason there is a grey background to the image when I upload it and view it on my home page. However, when clicking on the image there is transparency (which is how I'd like it to appear on my home page). I've attached a screen grab of the issue that I'm referring to. Can anyone offer any suggestions? Thank you!
  5. Site URL: http://algora.com.au Site URL: http://algora.com.au Landing page for this website (password is just "algora") has a section background which links to the following video. This loops after 17 seconds which is a bit jarring. How can I stop it looping and just pause at the last frame? Worst case I will have to edit the video so the last frame is extended for a long time... like an hour... hopefully there is a more natural way to do it.
  6. Site URL: https://www.kaci.io/growth-stories/ojtpx8stfab3p7xlc1bkft907usraq Hi! Across my whole website I have background images that bleed up under the transparent header. My logo on top is white. I'd like to be able to do the same for an individual blog post. Is there any way to do this? I obviously can't just leave the page white because then my logo doesn't show up. But I don't like the other full colour options. Help?
  7. Hello there, If you go to my site: https://activestatedesigns.squarespace.com/search?q=sunset (password: SiteTest) the header SHOULD be blue (#2C4F6D) like it is on my other pages. But it's white, so my White font in my logo is not seen. How can I fix this for only Search page? Each initial page (before scrolling) the header is invisible except when on hover. It's blue at all other times. Thanks, Lorne
  8. Hi everyone, I've been following several tutorials on how to change my background video to a more mobile friendly version using custom css. No matter what I try, the result weirdly starts to show the mobile version for a second before extending out going to the desktop version. I would love to get your advice on how to solve this frustrating issue. Thanks in advance.
  9. Hello! Having this issue with background images top and bottom is getting a whiteline when the resolution is lower then 8K. So backgrounds that has a resolution of 1920x1080 or 4K 3840x2160 it gets a small white line on top and bottom of the background. Does anyone know why? I have the 8K now but the load time is crazy and gives me a whitebackground for a couple of seconds.
  10. When the footer is disabled, the home page is full screen and the user cant scroll down at all. I like how that looks But when I add a footer, it hides below and the user needs to scroll down a tiny bit. I'm trying to do 2 things 1. make the background of the footer transparent so the text floats over the image in the bottom corner. 2. move the footer up, so the user cant scroll down.
  11. I've tried a few different methods but have not been able to change the background color when hovering an item on my project section on the homepage. I'd like each of the four items to have a unique background color. Any suggestions are appreciated! Password: squarespace
  12. Hello, Is there a way to change the background image for each of the pages on my site? Ideally, I'd like a different image for each page. "About" would have a specific image, "Fiction" would have its own image, and so on. I've done some digging, but haven't had much luck. Thank you! site: www.catlynladd.com template: Aviator
  14. Hello there, Having a hard time adding a background image to my website. I attached screenshot for better understanding. I want to add another image underneath the gallery or may be add blue background color to avoid this awkward white space. Any suggestions would be appreciated.
  15. Site URL: https://aria.squarespace.com/ Hi, Using version 7.1. I would like to create a seamless gradient background for all the pages, including the portfolio page but excluding the footer. However, the code I am using is creating a gradient for each section. Here is the code I am using: .white:not(.has-background) .section-background { background-image: linear-gradient( to bottom right, #99cbc6, #e3ccc2 ) } Please help! Thanks in advance for the input. The gradient is applying separately to each section here: What I would like to achieve:
  16. Hello everyone, i need a little help to put a dynamic background in every sections. As you can see there is a line between each section. What can i do to sync the background on all sections ? Thank you very much for your help. Password: 0412
  17. I just redid my website using the IMPACT template on version 7. My website background is black and the header and body text is white. Everything looks great except I have one page that is text heavy and I believe a little hard to read with the black background. Is there custom CSS I can do to allow me to change the background on just one page to white and make the heading and body text black? I want to keep the overall aesthetic of the black but just this one page white so it's easier for clients to read. Thanks
  18. Hello, is there a way to add a coloured background to the text part of the product page?
  19. Is it possible to have a coloured background with white text blocks and black font? Like https://stonemaier.com
  20. I have a YouTube background video that doesn't look great on mobile. Can I use a completely different YouTube video as the background video on mobile?
  21. Hi everyone, I've recently finished a website for my client and everything was working just fine, until some 24 hours later all the videos stopped playing on mobile version. I have embedded videos from Vimeo and an uploaded background video. All of them just suddenly stopped playing on mobile. I must mention that I have them in autoplay and did come across some sources on the internet talking about it eating up bandwidth. Anyone else faced these issues? I also found some previous threads that just never got resolved. Any help appreciated. Thank you.
  22. Hi. I have used custom CSS to add a background image of repeating contour lines. Up until recently this was showing up but something I have done has made it disappear. I can't work out what though. Could anyone help please? The custom CSS is below with the last section being the part for the background contours. Thank you, Jacob.
  23. My default text background (and the color of the image card text area) is orange, and I need the text backgrounds (and/or the image cards) to be able to change colors. I've attached a screenshot of the areas I want to change. Can someone tell me how to do this in CSS so I can change text backgrounds to specific HEX? Thanks!
  24. Greetings! We would love feedback on the design of our resource page for teachers. We are trying to build this in the spirit of the web version of the email we send each day in Constant Contact (here is the link). I tried my best to build it using sections, an image as the background, and shapes on the left and right quarters of the page. We are seeing scaling issues that I don't see on other websites. When we zoom in (on mac using command-plus) the button text begins to shift to two rows along with other the other text shifting. Also, our users cant copy the image from the page by right-clicking without clicking on the image first. Is there a way to fix this, as well? Any first steps for fixing this for a math teacher/principal with very little experience? Super grateful for any responses! John
  25. Hiya I'm editing a site which has a landing page and an animation embedded within that. It looks great at desktop view but when viewed on mobile, the animation is too large to fit the screen. Is there standard CSS to embed in order to make the animation appear smaller on only the mobile view without compromising the background colour being the animation which fills the screen? Thanks!
  • 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.