Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'background'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: https://awmenikah.squarespace.com/ Hi everyone, I have a case that I want to change my mobile menu background and menu items colors differently for each page. Is there any ways to do it? My site URL: awmenikah.squarespace.com Pass: sikatmbuy Thank you in advance! Cheers, Wendy
  2. Site URL: https://www.wakeupinthegarden.com/ I have a slideshow gallery in the homepage, but want it as a full-bleed image background instead of a section under header. Is it possible to use code? Thanks for any help.
  3. Site URL: https://pumpkin-hawk-yyfr.squarespace.com/ We've using a video banner in the top section of our homepage. We're using it as background because we want it to autoplay and be full bleed. We don't want the video to loop though. Is there a setting, or a snippet of code, that would prevent the video from looping? Thanks.
  4. Site URL: https://atelierwit.com Hii! I've tried everything in the book but I am getting so frustrated with SS's responsive design, I basically just want my website to be displayed on the mobile version the same as it is on the desktop version. I already applied this code to make the background header appear smaller on mobile but it doesn't look that great because the text underneath is now is huge compared to the image. /* mobile-top banner */ @media screen and (max-width:767px) { body.homepage article section:first-child { min-height: unset !important; height: 43vh; } } Also I really want galleries in the original form (less height and more images displayed), text / image blocks to appear next to each other like I designed it with the desktop site and my product pages to not stack underneath each other but have at least 2 columns. If it's not possible, any other tips to achieve the look that I want with the 3 main problems I have would be so helpfull aswell! Thanks in advance 💗💗💗💗
  5. Site URL: https://aboutbeavers.squarespace.com Hi! I recently build a small portfolio website. It was important for me to always have a white website with black writing/menu. However, I saw my website on a friend's Android phone. And it turned out that (during the day!) the website was black. And also the burger menu was dark grey instead of black/white (depending of which page it is). I guess this is the dark mode that the browser enforces? Is there a code to prevent this from happening? On my iPhone there is always everything in white (see Screenshot) - even at night with system-wide dark mode. Best regards, Seeeeeg
  6. Site URL: http://www.piscesaccounts.co.uk Hello, I have created a website for a client, there is a background video in the top banner of the home that displays nicely on desktop but on mobile is showing only partially. I tries with a fallback image but then the fish was showing super big when loading the page and then it goes into the video showing partially the fish, so there is really no substitution of the video for the image in mobile. I tried with a fallback gif and the same problem happened. This is also happening when I use an image as a background banner, in mobile version it shows only partially. Does someone know how to fix this issue? Would it be possible to have the image / video centered somehow in the mobile version? Many thanks!
  7. Hi, I have desperately been trying to change the background color of the navigation bar of my website... It should look like this: https://www.couldihavethat.com/ The logo should be in the top left corner with no background color. Thanks everyone for your help
  8. Site URL: https://plums-raccoon-7bwz.squarespace.com Hey guys, I'm looking to add a pattern that repeats itself all over the background of all the pages of a website I'm making with the Bryant template. Can anyone help with CSS for this? Thanks alot! website: https://plums-raccoon-7bwz.squarespace.com password: boucharel43 Max
  9. Site URL: http://uplan.io Hi everyone, I have been trying to make a number counter with a codeblock to show our page's visitors how many "app users" and "project made" we currently have. The problem I ran into is that when I put a background picture, for example a darkish blue, the number turns black all the time. I checked the coding and it says that it is white, but it displays black. Can someone please help with a code or another solution? Of course a mobile compatible would be great. I used a jquery number counter coding and I would be thankful for the help. Here is the coding: <h1>JQUERY NUMBER ANIMATION</h1> <h3>jQuery counter to count up to a target number</h3> <div class="wrapper"> <div class="counter col_fourth"> <i class="fa fa-code fa-2x"></i> <h2 class="timer count-title count-number" data-to="300" data-speed="1500"></h2> <p class="count-text ">SomeText GoesHere</p> </div> <div class="counter col_fourth"> <i class="fa fa-coffee fa-2x"></i> <h2 class="timer count-title count-number" data-to="1700" data-speed="1500"></h2> <p class="count-text ">SomeText GoesHere</p> </div> <div class="counter col_fourth"> <i class="fa fa-lightbulb-o fa-2x"></i> <h2 class="timer count-title count-number" data-to="11900" data-speed="1500"></h2> <p class="count-text ">SomeText GoesHere</p> </div> <div class="counter col_fourth end"> <i class="fa fa-bug fa-2x"></i> <h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2> <p class="count-text ">SomeText GoesHere</p> </div> </div> <style> .col_half { width: 49%; } .col_third { width: 32%; } .col_fourth { width: 23.5%; } .col_fifth { width: 18.4%; } .col_sixth { width: 15%; } .col_three_fourth { width: 74.5%;} .col_twothird{ width: 66%;} .col_half, .col_third, .col_twothird, .col_fourth, .col_three_fourth, .col_fifth{ position: relative; display:inline; display: inline-block; float: left; margin-right: 2%; margin-bottom: 20px; } .end { margin-right: 0 !important; } /* Column Grids End */ .wrapper { width: 980px; margin: 30px auto; position: relative;} .counter { background-color: #ffffff; padding: 20px 0; border-radius: 5px;} .count-title { font-size: 40px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; } .count-text { font-size: 13px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; } .fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> (function ($) { $.fn.countTo = function (options) { options = options || {}; return $(this).each(function () { // set options for current element var settings = $.extend({}, $.fn.countTo.defaults, { from: $(this).data('from'), to: $(this).data('to'), speed: $(this).data('speed'), refreshInterval: $(this).data('refresh-interval'), decimals: $(this).data('decimals') }, options); // how many times to update the value, and how much to increment the value on each update var loops = Math.ceil(settings.speed / settings.refreshInterval), increment = (settings.to - settings.from) / loops; // references & variables that will change with each update var self = this, $self = $(this), loopCount = 0, value = settings.from, data = $self.data('countTo') || {}; $self.data('countTo', data); // if an existing interval can be found, clear it first if (data.interval) { clearInterval(data.interval); } data.interval = setInterval(updateTimer, settings.refreshInterval); // initialize the element with the starting value render(value); function updateTimer() { value += increment; loopCount++; render(value); if (typeof(settings.onUpdate) == 'function') { settings.onUpdate.call(self, value); } if (loopCount >= loops) { // remove the interval $self.removeData('countTo'); clearInterval(data.interval); value = settings.to; if (typeof(settings.onComplete) == 'function') { settings.onComplete.call(self, value); } } } function render(value) { var formattedValue = settings.formatter.call(self, value, settings); $self.html(formattedValue); } }); }; $.fn.countTo.defaults = { from: 0, // the number the element should start at to: 0, // the number the element should end at speed: 1000, // how long it should take to count between the target numbers refreshInterval: 100, // how often the element should be updated decimals: 0, // the number of decimal places to show formatter: formatter, // handler for formatting the value before rendering onUpdate: null, // callback method for every time the element is updated onComplete: null // callback method for when the element finishes updating }; function formatter(value, settings) { return value.toFixed(settings.decimals); } }(jQuery)); jQuery(function ($) { // custom formatting example $('.count-number').data('countToOptions', { formatter: function (value, options) { return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ','); } }); // start all the timers $('.timer').each(count); function count(options) { var $this = $(this); options = $.extend({}, options || {}, $this.data('countToOptions') || {}); $this.countTo(options); } }); </script>
  10. Hi Everyone! I was wondering how do you adjust your backround image to fit in side the box. I need it too look like this: And another How would I be able to adjust the backround on mobile? Thank you!
  11. Site URL: https://daffodil-cornet-h2zb.squarespace.com/ Hello! I am working with squarespace 7.1 and am looking to create a clickthrough url for the background image of the last section on my landing page in the same way that you would be able for an image block. Seems like the only way possible is to add text (and create a link) or to add a button. However when I add text it reshapes my background image which I don't want. Any help on this would be appreciated. Thank you!
  12. Site URL: https://beachinsurance.co.nz Having a bizarre issue on mobile devices. Using SS 7.1 Section background images using image effects (zoom, pan) flicker when scrolling. Scrolling to the top of the page makes the background image disappear completely. Only two vertical lines show up. If I remove the animation there's no problem. I'd appreciate any help or ideas!
  13. Site URL: https://plantain-tiger-bjwd.squarespace.com/config/pages/60b8480265d7df4bcf8f97ed HELP ME please. When I create a new section on any page of the website it is greyed out. See screen grab attached. I can still add content to the section. As you can see there is a button and a coloured background. But why is there a white/grey overlay on the section? If I move the section up then the image gallery comes down into the second position, and has the grey overlay. So it seems it's the second section position which has the problem. If I create another section below the second one it's completely fine. I hope this is an easy one to fix. thanks! 🙂
  14. Site URL: http://www.ryanewanchuk.com Password: SquarespaceDemoHelp! Hi, I am working on my site, and I've decided to use it as a sandbox to try to do some more advanced things. In particular, I am trying to figure out how to make my navigation bg colour change to match the bg colour of a section on scroll. I'd like it to change when 90% of the next section is visible. An example of this is at https://www.bynd.com/ I'm sure this would involve anchors and javascript, but I was curious if there was a simpler way to accomplish this?
  15. Site URL: https://parrot-apricot-rfb9.squarespace.com/missionupdate Hello everyone, Please can you help me with a code to add a custom BG image to my Squarespace 7.1 blog page: Page (still under construction): https://parrot-apricot-rfb9.squarespace.com/missionupdate Thanks so much!
  16. Site URL: http://www.jeffkrueger.net How do you change just the color of the background on the shopping cart page in 7.1 to white?
  17. Hi The opening page of my site has background video using the standard squarespace method. It works perfectly on desktop. Previously the background video seemed to worked fine on mobile too (iphone..chrome.. ios 13.4.1). But now the background video has stopped working on mobile. It's just a black screen. It's extremely frustrating. If i embed video on the page manually, i can get it to autoplay on mobile (using background=1) . But it doesn't look right (it does not fill the screen). Is there a way to match the squarespace background video look (ie always filling the screen, and zooming in to the centre of the video on mobile) using specific embed code? Or has anyone found a way to get squarespace background video to work on mobiles (i've seen plenty of non-squarespace sites that work fine)? Thanks
  18. Trying to create a landing page with where the full-bleed background image changes when hovering over different text. Does anybody know how to achieve this on Squarespace 7.1? Similar to this: https://nicolainiermann.com Thank you!
  19. Site URL: https://moneyfit.org/debt-consolidation On the intro section background of each of my landing pages my embed form hangs up on mobile as it is loading. It eventually will either fully load after a short time or when a user clicks on a fillable section of the embed. Sometimes a page refresh will resolve it. On desktop it loads a bit better but sometimes the bottom of the background doesn't load. Any suggestions or way to force the background image to fully load on both? Thanks in advance.
  20. Site URL: https://raccoon-radish-ytrb.squarespace.com/ I'm having an issue with my homepage, which is currently a YouTube video in the background on desktop browsers and working perfectly fine there, but on mobile phones, it shows the fallback image, which is fine, but when you start scrolling down, that video section becomes white. And it stays white even when you scroll back up. On my iPad, it also shows the fallback image and although that section doesn't become completely white when you scroll down, it does become partly white. You can see for yourself. Passcode is flutesandflutists Any help would be appreciated. EDIT: I've been playing with the image dimensions and noticed that if I shrunk the width to 2500 pixels, it's appearing a little better on mobile. Instead of turning entirely white, it's only about half. So it's probably something to do with the dimensions. I then resized it according to what SS recommends, which is apparently 2500 x 1500 for banner images but then that made it a bit worse, with roughly 1/8 of the image turning white. I also noticed that as I'm scrolling down, the image looks like it's trying to zoom in but it's behaving strangely. I don't want to have any effect for the fallback image but I can't seem to change it.
  21. Site URL: https://triangle-keyboard-t5hz.squarespace.com Hi - I am changing increase the overlay opacity on the top image on mobile only. This is the code I am using without success. @media screen and (max-width: 640px) { [data-section-id=“609aa62a18656e56660631b2”] .section-background .section-background-overlay { opacity: 0.3; }} If anyone can tell me what I am doing wrong that would be great. I am getting a syntax error on the [data.. ] section. Thank you. Password: WLAC
  22. Site URL: https://virginsuncare.com I am trying to get my background video to play with sound on Squarespace Version 7.1. Is there any code to interject somewhere that will allow this? The sounds comes through perfectly when using just a Video Block but it doesn't come through at all when embedding the video into the background. I would really appreciate any guidance here. Thank you!
  23. Site URL: https://www.marcelohm.com/ Hey forum, I've spent the last 4 days changing from wix to squarespace and completely rebuilding my photography portfolio. So far I've been very pleased with Squarespace and did not face any big troubles. However, just as I'm about to finish the hover effect on my landingpage stopped working properly. https://www.marcelohm.com/ The hover effect is supposed to change the full background image upon hovering and as I set up the site everything worked just fine. Yesterday when I got into the builder the site started displaying a small portion of the standard background image at the top of the screen. I've tried every option that I can think of, regarding the header and the portfolio element, but I can't get it back to working properly. Any help in resolving this issue is much appreciated.
  24. Site URL: https://fuchsia-conch-gtas.squarespace.com/config/pages I have a design to create a customised contact form and it is required to have a card like design with a background image. And the form is not in the regular input design. I can only see limited customisation levels for sections and forms. Is there any way I can implement this successfully?
  25. Site URL: https://www.impactpa.church/kids I've done quite a bit of browsing across the web trying to follow different tutorials to get a custom background to work in squarespace. Does 7.1 even allow custom backgrounds? I've tried using some different backgrounds from heropatterns.com but haven't been able to get any to work. I'd ideally like to use the background for the whole page minus the header and the footer, but I can't even get my code to work for a section. .page-section[data-section-id="5f6202a7242abe11d0086eec"] {background-color: #DFDBE5; background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E"); } Any help is appreciated!
  • Create New...