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
    • 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. Site URL: http://www.babysitterinabox.co.uk Does anyone know how to edit the background image on homepage so that it shows the full image on the mobile site?
  2. 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!
  3. www.timelessweddingfilms.com Password: weddingday So I'm looking for a few things here. First and most import probably is the video on the main page. I am trying to get it to span the width of the screens for PC, Tablet, & mobile, and show the full dimensions of the video without the black bars on top and bottom that seem to be showing no matter how I resize the block. Second, I can't seem to figure out how to get the footer the way I want it. Currently it is stacked. I would like everything centered in its columns and relative to the site, but in a column layout where I have the business info stacked on the left, the navigation linked in the middle but kept it its horizontal form if possible, and then the social links on the right. When I try to even put it in the stacked form it looks weird to begin with and without any sort of way to move them at all. Third, I am trying to figure out how to extend or have a color background strip across the width of the page in a specific area. I couldn't figure out a way to create what I wanted on the site so just made an image but I want to extend the gray background. I've added some custom CSS for a few things already but I'm sure some of it needs to be fixed maybe. Also hoping there is a way to make the two gallery blocks on the home page the width of the site as well. AND when I view it in mobile mode they show up differently between the two for some reason. the first one is all together and the second one has a space between the photos. Is there a way to make it so the photos show one by one stacked in mobile view the width of the phone instead maybe? Any help for these three things would be greatly appreciated!!
  4. Site URL: https://www.sayuriichida.com/ Hello, Can anyone please help me with disabling video background only in mobile view? I have tried most of the CSS found on similar topics, but none worked on my website. The background video gets cropped weirdly on mobile, so that I would like to hide it. I was able to disable the video with some CSS. However, it hid the project titles altogether, which are located in the centre of my homepage. Thank you very much in advance. Best regards, Sayuri
  5. Site URL: https://scaacquisition2020.com pw:1234 This is making me nuts. I need to remove the image overlay that appears when you hover over the portfolio links on my homepage. There is no setting within the design color editor and I've set all "image overlays" to transparent just to be safe but still can't figure out what the CSS should be to remove this annoying default setting. EDIT: Here is the correct CSS for anyone interested .portfolio-hover-bg-overlay { display: none }
  6. Hello All, I'm looking to customize the full background of my current template 'Horizon'. I added the following CSS to my Homepage, but I am not seeing the image appear: #code { background-image: url(https://static1.squarespace.com/static/5e8e444d060d9c69061aab33/t/5eaf32a6437a4e57ef531b06/1588540071899/silent-season-background.png); } I'm seeing that SquareSpace does not allow custom code on cover pages. Are they considering index.html/home a cover page? Any help here is greatly appreciated. Thanks, David
  7. Site URL: https://www.kiskalab.com Hi I've added a background video on my home page kiskalab.com and it looks good in a mobile version but in desktop version the crop is hiding the upper part of the video. Is it possible to align the background video by the top part? Thanks in advance for your advices
  8. Site URL: https://fish-primrose-czfn.squarespace.com/config/ Hi, Does anyone happen to know if it's possible to make a background image click-through? My home page has a series of full images. Each image refers to a project, and I'd like the entire image (not just the text) to be clickthrough. Any ideas on code? Thank you! Tommy
  9. Site URL: https://meinphotokurs.ch Hi guys I'm trying to disable the background image of a section on mobile, but somehow I can't manage to do that. I found in different forums this code: @media screen and (max-width: 768px) { section[data-section-id="6242b5d7ad5bb6583194145b"] .section-background img { display:none !important; } } I tried also different variations I found over the net, but nothing really works... Does someone know what could be the problem? Best regards
  10. Site URL: https://www.wunderarchitectes.fr/ Hello, URL : www.wunderarchitectes.fr I don't understand why the background video I uploaded (file, not youtube or vimeo link) on the header is in good quality on desktop and very low on mobile? Any help on how to address that? Thanks! Cloé
  11. Site URL: https://www.twinforkswindow.com I can't figure out why my video isn't autoplaying on Safari. This is a new problem. When you used to go to my webpage the video would play automatically. Now you see a play button and nothing happens when you press it. This is only happening on Safari. On Google Chrome it works as intended and how it used to work on Safari. Something must've changed recently.
  12. I am trying to add a video onto my website in the image section where it has then video upload section. I upload the video and when it plays through it flashes white for a second then it starts playing again on AUTO. I don't want the black so I need a solution to stop that, how is that? Can someone please help me. attached reference IMG_8245.MOV
  13. Hello. On my site, I have my header navigation background set to transparent on all of my pages, I have a blue background behind my headers so the navigation logo and nav items just overlay the blue background. For example, see here https://www.graphitefinancial.com/blog or https://www.graphitefinancial.com/ However, for my blog posts I cannot add a blue background behind the header with the theme I'm using. See here: https://www.graphitefinancial.com/blog/title-growth-at-all-cost-strategies-arent-working-for-startups-heres-what-is-and-always-has. So my logo doesn't show since it is white. Is there a way for me to set just the blog posts to have a specific background. I DO NOT WANT TO CHANGE THE HEADER NAV BACKGROUND COLOR ON ANY OTHER PAGE BUT A BLOG POST. Thanks :)
  14. Site URL: https://lime-wolverine-672z.squarespace.com/ Hello! I am trying to figure out how to create an animated background on my (trial) site. I tried the most referenced option - https://www.gradient-animator.com/ and set the id to my collection background: #collection-60ea7161025aa46e30e0a38a { .css-selector { background: linear-gradient(270deg, #cfadea, #9b51d5, #7b658c); background-size: 600% 600%; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; } @-webkit-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } } I've also tried this code to no avail and set it to each section background (this is currently up): section[data-section-id="60ea7162025aa46e30e0a4bd"] .section-background { background-image: linear-gradient(100deg,#3874ba,#edccc9) !important; background-size: 400% !important; text-fill-color: transparent; -webkit-text-fill-color: transparent; -webkit-animation: Gradient 10s ease infinite !important; -moz-animation: Gradient 10s ease infinite !important; animation: Gradient 10s ease infinite !important; } section[data-section-id="60ea7162025aa46e30e0a4bb"] .section-background { background-image: linear-gradient(100deg,#3874ba,#edccc9) !important; background-size: 400% !important; text-fill-color: transparent; -webkit-text-fill-color: transparent; -webkit-animation: Gradient 10s ease infinite !important; -moz-animation: Gradient 10s ease infinite !important; animation: Gradient 10s ease infinite !important; } section[data-section-id="60ea715052638457540dc335"] .section-background { background-image: linear-gradient(100deg,#3874ba,#edccc9) !important; background-size: 400% !important; text-fill-color: transparent; -webkit-text-fill-color: transparent; -webkit-animation: Gradient 10s ease infinite !important; -moz-animation: Gradient 10s ease infinite !important; animation: Gradient 10s ease infinite !important; } Am I missing a code block or class id? Do I need to have a business plan for the animations to work? Or are my eyes deceiving me? Here is my site: https://lime-wolverine-672z.squarespace.com/ and login is pine212apple Thank you for your help!
  15. Hi all, I'm trying to get the background image of a section (first section on a 7.1 home page) to randomly load a different image each time the user visits or refreshes the page - probably around 8 images in total. I found the below code on an older post - sometimes it works, sometimes a new image loads but the original suddenly pops up over top of it. Any suggestions that might iron out the bugs here would be appreciated. <script> document.addEventListener('DOMContentLoaded', function() { var images = [ 'https://randomwordgenerator.com/img/picture-generator/54e9d1454b5ba914f1dc8460962e33791c3ad6e04e507440752b7edc9649c2_640.jpg', 'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg', 'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg', 'https://randomwordgenerator.com/img/picture-generator/nick-dunlap-h65WkTvyWJY-unsplash.jpg' ].sort( () => .5 - Math.random() ); var randImage = images[0]; document.querySelector(".homepage article.sections section:first-child .section-background img").src = randImage; document.querySelector(".homepage article.sections section:first-child .section-background img").setAttribute("srcset", ""); }); </script>
  16. I'm trying to create 3 sections so that they look like the below. Top section in white, middle section with a background of that photo, and bottom section in navy blue. Can someone walk me through this please?
  17. Site URL: https://hexahedron-point-47ee.squarespace.com/ Hi there, I'm looking to create a block of transparent color over an image, as a background for a text heading. In my demo site, the color block is just on the image file, but the idea would be to create it in CSS (or otherwise), so it doesn't change height as the image stretches. Any ideas?
  18. Site URL: http://capybera-point-sp57.squarespace.com Site password: 1234 Hey there! I'm trying to figure out if there is a way to add a blur effect to my site when I open the menu up on a mobile device. For example, in the picture I'd like the background "hey there", "work i'm proud of", and even the dividing line between the blue and the white to all be blurred when this menu is open.
  19. Site URL: https://www.sidioustn.com/ Hi! I am having issues with the first section background on the opening page of my site, specifically on mobile. The background is an image and looks fine on desktop. But when switch to mobile it does not scale correctly like the rest of my pages do. For example, the "Contacts" page has the same format, Image as a background of a section, and scales fine with mobile. Any idea why this is happening?
  20. Site URL: https://parrot-conch-h8zt.squarespace.com/home-miller Hi all! I am using Miller to create a website with a forced mobile site so I can have the hamburger navigation menu on the entire site. One thing I noticed is that I am unable to have the branding over the image on forced mobile vs. how it looks on the normal desktop version -- please see attached images. Ideally I would like screenshot 1 branding/background with screenshot 2's navigation menu. Any insight on how to accomplish that would be greatly appreciated! https://parrot-conch-h8zt.squarespace.com/home-miller password: $qu@r3$p@c3h3lp123!
  21. I'd like to replace the background header image with one that is designed to fit a vertical layout when site is viewed on mobile. Ideally text and icon sit above the person in the image, rather than to the side like they do for larger displays. site is https://icosahedron-rust-5y3f.squarespace.com/ password: 2020 The image below is the one I'd like to use for mobile. I can adjust image size/dimensions if needed. Any help greatly appreciated!
  22. Hi. Anyone know of a code that enables instagram feed to be set as section backgrounds? This would be a great option to have.
  23. Site URL: https://www.lauranoxon.com Hi! This has been driving me crazy -- in the Aviator template, my background has always been fixed while the content on top of it scrolls. However, I noticed recently that on some pages the background stretched to cover the entire height of the page, and those backgrounds no longer stay fixed. I changed them to "contain" so at least it doesn't look warped, but despite having "Fix position" as "fixed" on all pages, it clearly is not. Can anyone advise? Thanks!
  24. Site URL: https://www.capsaparis.com/ Hello! My client wants a split image as hero on the index page, with a white headline over. For now I have just created a split image in photoshop and uploaded as a full bleed background. It looks tolerable for now – but I want to make it the right way, and get better control over mobile view. So that I can get the center right – I tried moving the background image focus point for mobile view but that moves it for desktop aswell. I haven't found a way to keep the split in the center AND customize the mobile view so one of the images is in focus, not the center of the split. If centered on desktop view it shows only the middle (the split part) on mobile And if the focus point is set best for mobile – then desktop center is off. Until I know how to do this my client is ok with the present solution But it would be so much easier if it worked as a gallery but looked the same. Especially when adjusting for mobile view. Is using a gallery with 2 images and adding code to get a headline over them the best option? If so how? We like the look of full/inset aswell. It is not necessary to have full bleed if there are good solutions with such limitations. The most important thing is to get the split to be in the center and to get the headline over them. Right now I am using the background with the tilt effect – but this tilt effect is not necessary if too difficult. Also looking for ways to do this with 3 images, – but mainly with 2 images – at this point. Aim is to build it so that my client can manage updating images herself. Any suggestions? This is the site: https://www.capsaparis.com/ Maria graphic designer www.mariakask.se
  25. Site URL: http://newelldesignstudio.com Hi, I am trying to change the text of the header/navigation on only one page to white and the background being black, again on only one page (index page & would like to know if I can do that throughout the whole index sections) I have tried many of the different codes and nothing is working quite right. Assistance would be very appreciated
  • Create New...