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

Search the Community

Showing results for tags 'background image'.

More search options

  • 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
    • 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



Found 17 results

  1. Hello, I'm trying to do a hover image swap on the background image. I see a lot of resources for swapping images within code blocks but not for background images. I have my working code here, but so far have not been working: [data-section-id="5dadd9923707f45fc260b448"] .section-background { visibility: hidden; opacity: 0 !important; } .section-background:hover { visibility: visible; opacity: 1 !important; } Any help will be very appreciated! Thanks!
  2. Site URL: https://suhama-demo.squarespace.com/?nochrome=false Hello, I am trying to create a site that has the layout of the template Suhama, particularly the block of text on the homepage, with links on several of the words in the text that change the background image as you hover over them, just like the template Hawley. I want to create a portfolio site that features hyperlinks within my bio that link directly to portfolio work. For example, if my bio were: Cameron is a photographer and painter in Portland I would link the word "photographer" to a page with my photographs. As someone's mouse hovered over the word "photographer" it would change the page's background, similarly to how the template Hawley does this. Is this possible? https://suhama-demo.squarespace.com/?nochrome=false https://hawley-demo.squarespace.com/?nochrome=false
  3. Site URL: https://kangaroo-polygon-sn6z.squarespace.com/config/pages/5eb207726af5800bbd992893 Hi there, I'm trying to incorporate a background image to my entire site. I see that you can add a background image behind certain sections, as I've done on my homepage. But when I try to incorporate a gallery, which I would like to do for each of my projects, it doesn't give me the option to add a background. See here for example: https://kangaroo-polygon-sn6z.squarespace.com/config/pages/5eb207726af5800bbd992893 I found this code which I tried, but it doesn't seem to work across my entire site: .Main { background-image: url(https://static1.squarespace.com/static/5eaf6fc4f965f00825c6bbd9/t/5ed40fa69aade12795395877/1590955948395/background.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; } If someone could help me out, I'd greatly appreciate it! Thank you!!
  4. I am at wit's end trying to find the answer to a seemingly basic question. Someone please help. What are best practices to make sure the homepage background image is working with the text and buttons imposed on top? For example, let's say I want to have the homepage background a house with a sky and mountain backdrop. The house is the hero of the image and I want to control the text and buttons to not cover the house and instead be where the sky is. As it stands, the best I can think of is to use photoshop to tediously trial and error the position of the house within the image (e.g. at the very bottom with a disproportionate amount of sky). The trial and error does not work. Squarespace will maddeningly reformat the layout of the image so the outcome is not what you had imagine when in photoshop. Based on how they reformat the layout I then make more tweaks in photoshop to compensate for the seemingly arbitrary adjustments Squarespace made. But to no avail. What am I doing wrong??? This is such a basic yet super critical part of the website and it blows my mind that Squarespace - who prides themselves on aesthetic - didn't elaborate on one of the most important pieces of visual real estate. Am I not finding the right guide? Someone please help me.
  5. Site URL: http://www.eye4designavl.com Hi, so I am working on this website and using a template that allows for large background images. I setup the entire site to pretty much have background images. I designed the site normally with image blocks, text blocks, buttons, etc. - Just like any other. Now that I am done I am now curious on how SEO works with the all the text being over top these background images. Does this effect SEO and bots from reading sites. Graphically/Visually I made the image contrast we the text for the viewer, but I am curious if this scores bad and that I should not be doing this and keeping all text to white background. Does anyone know any details on what I'm trying to figure out? The site is eye4designavl.com Thank you!
  6. Site URL: https://crossingtheline.squarespace.com/ Site password: ctlonline Hello, Hoping to get some help adding a background image to the homepage of my site, using Wells theme. Using custom CSS I want to add a background image that covers the blog and right sidebar, but leave the left sidebar navigation clean. I tried this but haven't had any luck: div#canvas { background-image: url(https://i.pinimg.com/564x/ca/71/f6/ca71f61e01e93adcca2683696296e787.jpg); background-repeat: no-repeat; background-size: cover; } Thanks in advance! Carly
  7. Site URL: https://sarah-ward-interiors.squarespace.com Hello, I'm wondering if it's possible to add a background image to the Wells template, rather than just using a solid colour? https://sarah-ward-interiors.squarespace.com Password: SWI2020 Thanks, Sarah
  8. Site URL: https://www.securview.com If you browse different pages on my site, the hero images generally take a little bit of time to load. I see white text, and off white background for a split second. Although I'm technically using a black bold theme, which uses black background color, that doesn't load. If my top section uses a background image as a background, Squarespace ignores the theme color (showing off or regular white), and just waits a tiny bit of time, and loads the image. The style of my site is very contrasty, which makes it more noticable for certain people. I thought, are my images too big? I experimented. Compressed images even more. Didn't make a difference on a few pages. So I don't think image size loading is causing the site to load longer. Some have speculated this could have to do with the way certain browsers load AJAX/javascript from Squarespace. That's probably true. Do I have any control over that? The flash is VERY quick on Mozilla, almost not noticable, but more so on Chrome and Edge. I know if i remove the background image, letting that section just show black, then the section loads immediatly with black and no flash, and there is no problem. But I'd really like to have a background image, because that's the style i want. Anyway to make that happen without the flash? Why is Squarespace choosing to ignore loading the default theme background color I set it to if I have a background image? That must be how the backend is designed or coded. It's like squarespace is saying "Oh hey, since we know you like to use your image background, we can turn off the theme black background." And I would say "But wait, can you leave it on until my image loads, the images take a bit longer to catch up, otherwise it's more obvious?" It's kind of like someone is still putting their shirt on if you decide to use background images as clothing, with no undershirt. I'm asking, why not already have me wearing a black undershirt while i'm putting on the image shirt? Is there anyway to make sure that if a section has a theme black bold or whatever background, and I set it with a background image, to make it load like this: Click On page Theme Background Black with text, then image background ( i mean this is technically what theme is supposed to do and set to this anyway right?) instead of what actually is happening Theme Background Black NOT there but with text, then image back ground
  9. 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
  10. When I try to upload the below photo (or virtually any photo for that matter), it zooms in SO much. Mobile view is most important to me fyi. I have asked Squarespace customer service multiple times but have never received any answer that has worked thus far. There has got to be some sort of answer.
  11. Site URL: https://www.biconsboutique.com/ *FYI this is on an 18+ site, nothing explicit shown but we are sellers of adult products* i want to know how you can possibly mitigate the distortion to the background images in different blocks on mobile view. On my homepage I have blocks containing text, some containing links to social media etc. In desktop view the background image appears to maintain at constant size and appearance throughout all blocks. But when this is in mobile view, the background image distorts: on some blocks the pixel stars become really enlarged and on others they remain relatively consistent with the reduction in size of the content. I'm okay with coding and can apply this where necessary, but just can't find the resources online to suggest how to tackle this problem. Any help would be really appreciated.
  12. Hi! I'm trying to create a homepage with a list of my pages, but I want the background image to change as the mouse hovers over the page title... I've achieved this by using a portfolio template, but would prefer to just use CSS to keep it less complicated with navigation. I hope this makes sense! I've attached images if that helps :-) Thanks <3
  13. Hi all! I'm hoping someone can provide me with the code I need. I use the Wexley template and have seen code for the brine family but not Wexley. I'm looking to add a background image to the footer section behind the newsletter signup. I'm looking to have the image fill the whole entire bottom and have the text for the newsletter be white, so that it will pop against an image background. I used this to get the image on the footer; however, it does not fill the whole footer, wide, full bleed. What should I adjust? footer#footer { background-image: url( insert here); background-position: center center; background-repeat: no-repeat; background-size: cover; } Additionally, how can I make the newsletter text white, so that the text can be seen? Thanks!
  14. Hey guys, hopefully this is in the right place. I am just trying to work out how to create the attached screenshot with out having to have the text as an image. Has anyone got any ideas or done something similar? Any help would be awesome. Thanks!
  15. Site URL: https://cinnamon-guitar-2zdw.squarespace.com/blog Hello, I need help with adding a background image to my blog index page with css. ...or, adding a background image to to the wrapper of each blog post. I've been playing around with this code, but nothing is working: .tweak-blog-list-style-stacked .BlogList-item-image { background-image: url(IMAGE URL HERE) width: 100%; max-width: 500px; } If anyone can please advise, I'd really appreciate it! Site Password: 7512
  16. Hi! Is there a way to create a similar style effect: https://nicolainiermann.com/ U want to randomly place text on my homepage en the background has to change when I hover over it! Thanks in advance! Kamiel
  17. I'm using the Impact theme and have added a very light background image in one section. I have set my alternative colors to lighter choices as this is what I will need for the majority of the site, but for this particular section I would like to use my original darker color. Is there a way to override this alt color for my H3, but only on this particular section of the site? Any help is appreciated. Thanks! ** Pic of the affected white H3 in attached. Domain is https://parrot-rabbit-m3m9.squarespace.com/
  • Create New...