CSS code changes not being applied to my website

Site URL: https://wwww.jlhupephoto.squarespace.com

Hi there,

I've added a bit of CSS code in design, in order to have a fixed background on my welcome page.
But, since upgrading to a basic plan, this doesn't work no more.
Here is the bit of code I used:

body::before {
  background-image: url('https://static1.squarespace.com/static/5e396e0cd589db5a1b0afc56/t/5eab35808ad3ef7e29f10b51/1588278657267/alex-loup-f9LYKKm9eUo-unsplash.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 100%;
  opacity: .2;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -10;
}

.Index-page,
.Header--bottom {
  background-color: transparent;
}

#about h1,
#about p {
  color: white;
}

It worked fine before upgrading. Since then, I can't get it to work as it would before.
Anyone can help me on this one?

thanks!

The URL you provided doesn't work. If you've not done so already please set up a site-wide password. Post the password here and then we can get a look at your issue.

Hi Creedon, thanks for your quick answer.

here's the link:
https://jlhupephoto.squarespace.com/

password is: kebabdallas3000

the idea is to have a fixed background for the welcome page. as you click on the citation, there's a smooth scroll animation bringing you down to "portfolio" and "a propos" page. it worked fine during trial, so I don't know what may have gone wrong.

I went to the URL for the image in your CSS and instead of seeing an image, I saw the following.

My guess is that you uploaded the image to a site that is now deleted. If you upload the image to your current site and replace the URL in your CSS, that may fix the issue.

My bad creedon. You were right, So i've checked this up, but I still have the problem anyway.
Here's the correct CSS code I've put in design:

body::before {
  background-image: url('https://i.ibb.co/RjWrdfT/DSF1994.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 100%;
  opacity: .2;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -10;
}

.Index-page,
.Header--bottom {
  background-color: transparent;
}

#about h1,
#about p {
  color: white;
}

I suggest that you take the above CSS and set it aside (save a copy somewhere). Then put the following in Design > Custom CSS.

#collection-5f5d0e67073ffa3ae3e26286 {

  background-attachment: fixed;
  background-image: url( 'https://i.ibb.co/RjWrdfT/DSF1994.jpg' );
  background-repeat: no-repeat;
  background-size: cover;
  
  }

#collection-5f5d0e67073ffa3ae3e26286 .page-section,

#collection-5f5d0e67073ffa3ae3e26286 :not(.has-background) .section-background {

  background-color: unset;
  
  }

The above only targets the welcome page with the effect that you want.

Now edit the welcome page and remove the background images from the two page sections.

That should pretty much do what you want.

Let us know how it goes.

Okayyyy,this is exactly what I was looking for. Spot on!
I wonder how the first CSS code i've put won't work any more... But anyway.
I was able to use an image url directly from squarespace host system, so I now have an HD Image on top of this. Neat!

Thanks A LOT Creedon for your help!
 

20 hours ago, JLhupe said:

Thanks A LOT Creedon for your help!

You are welcome!