Jump to content

CSS code changes not being applied to my website

Recommended Posts

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!

Link to comment
  • Replies 8
  • Views 358
  • Created
  • Last Reply

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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

197571386_ScreenShot2020-09-15at11_23_25AM.png.34db2a2ccecb99cacec4574859f6ca7e.png

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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;
}

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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!
 

Link to comment

Archived

This topic is now archived and is closed to further replies.

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