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

Search the Community

Showing results for tags 'backgroundimage'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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 Topics
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Topics
  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location

Found 22 results

  1. Site URL: https://www.davisandcointeriors.com.au/full-interior-service Hi All, I'm building a website in 7.1 and I'm struggling to contain a section background image OR find a more appropriate solution. As you can see from the attached image, the items in the image are on the sides. When viewed on smaller screens, rather than the image being scaled down, the image crops to the point where the items are no longer visible. This is clearly not what the client wants. I've tried added custom CSS, but it's just not doing anything. Any help would be greatly appreciated. EN
  2. I'm trying to add a page specific background image, which should be resized so it fits the screen. Though, either I can't get it to show or resize. Any help is greatly appreciated. #collection-ID .collection-54061d89e4b0fd1f5b9456b1 { background-image: url('https://static1.squarespace.com/static/5e8315c121a7960214076bd8/t/5ecf54954e191958620c39ad/1590645913058/Eilersen_factory_Slovakia_1_93L9433-2.jpg') !important; background-repeat: no-repeat; background-position: center center; background-size: cover; opacity: 0; margin: 0; padding: 0; display: grid; height: 100%; max-width: 100%; max-height: 100vh; margin: auto; }
  3. Site URL: https://www.onehandsanitizer.com/ I have a background image at the top of my website (www.onehandsanitizer.com). It has my logo and the company slogan. It looks great on desktop but on mobile, most of the image gets cut off. I want the image to shrink to fit in the screen on mobile instead of cutting the sides off. I tried a few things in custom CSS. I was able to get the image to shrink by setting height: 50%; but that didn't shrink the parent container, leaving me with a bunch of white space where the picture used to be. I also tried finding the #yui_... ID for this section but couldn't find it. Not sure if that is cause this section only consists of a background image or not? Is there a way for me to shrink the image on mobile without having a bunch of whitespace underneath it? And if not, how would I go about having one background image on desktop and replacing it with another on mobile? A solution to either question would solve my problem. Thank you very much for any help!
  4. Site URL: https://dorimuranyi.squarespace.com/ Hello All, I have been trying to add background images to my site, but I have an issue for which I cannot seem to find the reason. I would like the image to either be adjusted to the screen size, or display in its original size (which I would adjust to be somewhat wider than the screen). The problem is, whatever image I set as a background, it stretches way over the size (width) of the screen - both on PC and mobile. To give a more exact explanation, the screen resolution on my PC is set to 1366 x 768 px. Regardless if I use a 2000 x 2000 px image or a 600 x 600 image as background, it will stretch to huge dimensions for some reason, that are much bigger than the original image (I mean several times the size) and the screen too. According to this Squarespace support article, '(...) images added through Site Styles (background images and site-wide banner images) load at their original dimensions. ' I would be fine with that, but it does not seem to be the case, or I am misunderstanding something... https://support.squarespace.com/hc/en-us/articles/206542517-Formatting-your-images-for-display-on-the-web Can anyone suggest how I could get a bckground image to display either in its original size or adjusted to screen width? Thanks for reading!
  5. Hey everyone, I want to achieve the action seen here in the header image section: https://www.equinox.com/groupfitness?icmp=topnav-classes I want my other thinks to fade on hover, and the background image to change for each link- using CSS. Attached a photo of the section of my site, same basic principles. Big titles that are linked over a background image. Anyone have some code that can accomplish this, or is this too complex for simple CSS? Thanks in advance!
  6. I've tried several different CSS codes for placing a static (or parallax) image as my background. I was able to upload the file in the Custom CSS > Manage Uploads section, and got the long URL for that specific image. The code I'm using is: body { background-image: url("https://static1.squarespace.com/static/5d71ceb59079ce0001c671f5/t/5eb6c7fbb2acbe6aa4bc1ce0/1589037051337/96808.jpg"); } I've tried several combinations of this including adding comment fields and whatnot, but no matter what I do, my background stays the same and doesn't change to an image. I've tested on both Firefox and Safari. I love the rally template but I can never seem to find any support for it in the main support documents, they always list other templates and act like rally doesn't exist. rally doesn't have a background image site style option or I would use that. I then tried this code: body, html { height: 100%; } .parallax { /* The image used */ background-image: url("https://static1.squarespace.com/static/5d71ceb59079ce0001c671f5/t/5eb6c7fbb2acbe6aa4bc1ce0/1589037051337/96808.jpg"); /* Full height */ height: 100%; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } And it still does not appear on any browser *shrug*
  7. Site URL: https://kristelandnic.com/ PW: 94591 I am attempting to remove the background images on mobile only for the "Hero" & "The Wedding Party" sections. Right now it just looks like a accidental line through the section. I attempted multiple CSS modifications to no avail. Any help would be much appreciated.
  8. 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.
  9. Site URL: https://blueberry-moose-azns.squarespace.com hello— I am working with squarespace 7.1 and am looking to create a clickthrough url for the background (full bleed image) on the landing page of the site, 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. I do not want to have text or buttons on the image, but want the image itself to function as the link. Any help on this would be appreciated. thanks.
  10. Site URL: https://www.davidstinsonphoto.com/ Currently, I have one photo that's full bleed for the background image on the home page (I have it set to only display the background image on the homepage). I want it to cycle through maybe 8-10 photos, BUT I do NOT want a slideshow on the home page. I want a different photo to load up randomly each time the homepage is visited (or refreshed). Anyone know the CSS to make this happen? So much appreciated! I'm using the Wells template.
  11. 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
  12. Hello. Is there a way to have a site wide background image in 7.1? Or at least apply background images to blocks? The site is private but I am not sure that you need to view the site to answer the question. Thanks for your help.
  13. Site URL: https://mitzura.squarespace.com/ Hello, Does anyone know of a way to add a background image to the header in 7.1? The workaround I've found is to make the header transparent, then add a section below the header which has the background image. But I don't want to have to go through every page of the website adding this extra section. I also tried adding background-image through custom CSS but it's not working: #header { background-image: url("sunman_tiny.gif") !important; } Any ideas much appreciated. Thanks, Erin
  14. Hi. I'm looking to find a way to keep my background image stable when user is scrolling. How can i lock the background image in place?
  15. Site URL: https://www.stephanejoly-mariage.com I would like to use a background image in a small area that gives the impression of "moving" when browsing a web page. As on this page: https://learning.squarespace.com/?_ga=2.40908450.1496741881.1585991481-409033015.1585991481 But I did not understand how to do it? (I'm on 7.1 version)
  16. Site URL: https://www.guilledelcastillo.es/contacto Hi guys, i've tried to put an background image in my contact page. As you can see, in my home page (www.guilledelcastillo.es) I have two background image (at the top and just above the instagram block) with the "Banner" metod/option. But... first, i dont want that the background image have movement and... second, I dont want that in the contact page the bakcground image invade the first navigation and the logo site (this is what happens when you put the background image with the banner option) How i could resolve this? @tuanphan and foro thanks guys Thanks u guys. An example make with Photoshop. I want this:
  17. Hey yall, currently having an issue with adding a site wide background image in 7.1. I've previously used the brine family in 7.0, and I understand that 7.1 doesn't support bg images. Is there a CSS workaround anybody can recommend?
  18. Site URL: https://www.richiequake.com/ I have been trying multiple ways to get a background image to take up the whole page. Using this CSS: #collection-5de6d28545f1a7075b7a2741 #canvas{ width: 100%; height: 100%; min-height: calc(100vh - 11px); background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg) } I have been able to get the background image to take up the whole page except: 1) There is still a black space on the left side of the page, and 2) The image is zoomed in and the rest of the picture is not displayed. I feel I'm missing something simple to achieve what I want but can't figure it out. The page is https://www.richiequake.com/ and you can view it using Help123. How can I get the background image to take up the whole page and that the image itself is completely shown and not zoomed in on one part of it?
  19. Site URL: https://www.fourmens.squarespace.com/home-page I'm working on a site for a local hardware store, which is one of 3 stores owned by 3 owners together which all use the same "Fourmens Farm Home" name. Since there are 3 stores, I currently have one main home page & just beneath the background header (which incidentally contains no Sqsp text, only spacers), I give them the button option to choose which store they (the customer) would like to visit. The main home page has the navigation set currently to not display (.Header {display: none !important;} because it interferes with the look of the main page. However, I want the main home page below the 3 buttons to continue with information for the largest store (rather than making them load another page). Is there a way to make the navigation bar appear by hovering over the main home page background image (no Sqsp text, only spacers on main banner) so that it could appear for those looking and needing it (by hovering over the background image - perhaps instinctively) to go elsewhere in the largest store, but otherwise it would remain hidden so as to not disrupt the appearance of the main home page. Bottom line: Main banner in background; header on main home page set to hide navbar for appearance sake; no Sqsp text, only spacers on top of main background image; would like the navbar to appear by hovering over the background image so as the customer mouses over the main banner, they see the navbar appear at the top of the screen enabling them to navigate away from & to other pages for that specific store. site: fourmens.squarespace.com, password: joyful1
  20. I'm trying to find away to have any control over the way my background image on my home page is cropped in mobile mode. I would like to either choose how it crops, change the image for mobile style only, remove the image and just have colour, or disable mobile style however disabling mobile isn't possible on the Polaris template. My site is https://www.mallorychipmanandthemystics.com/ Any suggestions appreciated! 🙂
  21. I have set up different background images to display on different pages and seemed to have it working, however now working from another computer, the background images on the Home page and Music page are not taking up the full screen. Also, on mobile the Home page is not displaying full screen either. This is the CSS I'm using for the background images on Desktop: #collection-5de6d28545f1a7075b7a2741 #canvas{ max-width: 100% !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 11px !important; background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #collection-5de6d2e045f1a7075b7a34a3 #canvas{ background-position: cover; max-width: 100% !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 11px !important; background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5df035e05d133c6a73380fa1/1576023521067/IMG_1683.JPG) } For Mobile I'm using: @media only screen and (max-width: 400px) { #collection-5de6d28545f1a7075b7a2741 .canvas{ max-width: 100% !important; max-height: 100% !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 11px !important; background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } The website I'm working on is richiequake.com, the password to access it is Help123. What I'm I missing in my CSS that the background images are not displaying full screen on Desktop and Mobile?
  22. I am trying to make a landing page in a similar style to this one:http://gravitymovie.warnerbros.com/ I am wondering if there are any methods y’all have found for creating compelling looping video backgrounds with Squarespace. I am currently using the Frontrow template and would love to loop video in the background. Any help would be hugely appreciated! -Jimmy
×
×
  • Create New...