Jump to content

Lock background image so it won't moving upon scrolling

Recommended Posts

7 minutes ago, derricksrandomviews said:

What template are you using? if it is in the brine family do this:

  1. In the Home Menu, click Design, then Site Styles.
  2. Scroll down to the Main: Overlay section.
  3. Check DIsable Parallax.
  4. You may also want to check Parallax Smart Crop to minimize cropping.
  5. Click Save

Thanks for your suggestion. Disabling the parallax in site styles it also locks the image in front of background image. I want to keep the parallax effect with the image but background image has to be stable to look nice. Now when scrolling both background image and image in front are moving upon scrolling.

Link to comment
2 hours ago, derricksrandomviews said:

Could you post the code? Other folks might need to do the same thing. 

Yes of course!

.collection-type-index #HERE_GOES_THE_URL_SLAG_NAME_OF_THE_PAGE_WE_NEED_TO_APPLY_THE_BACKGROUND_IMAGE {
  background-image: url("HERE GOES THE URL OF OUR BACKGROUND IMAGE WE UPLOADED THROUGH MANAGE_CUSTOM_FILES BUTTON INSIDE CUSTOM CSS SECTION");
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

The perfect background image size to fit exactly is 1500 pixels x 2500 pixels.

Link to comment
  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

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