Jump to content

One long image as background for sections

Go to solution Solved by tuanphan,

Recommended Posts

Hi, I want to use one long image as a background for multiple sections on my website. I don't want to reuse the image for each section, it has to continue, despite it being overlayed with different sections. How do I do this? When I add it to my design, I have to select the part I want to display, but don't see how to use the entire image.

Link to comment
  • Replies 6
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

  • 3 weeks later...
  • 2 weeks later...
  • Solution
On 3/22/2022 at 6:30 PM, sanmen said:

@tuanphan Could you let me know where I can find custom code to do this?

 

Add to Design > Custom CSS

/* Site background image */
.section-background, .page-section {
    background: transparent !important;
}
body {
   background-image: url(https://images.squarespace-cdn.com/content/v1/62022a0957301d1606a4276a/fb09d611-631d-482d-a48e-9f97cd91ebfd/gradient.png?format=original);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 8 months later...

I had this code working and now all of a sudden it doesn't anymore. I've got two of these, one for the body one for the header, maybe the yre in conflict?

/*Hintergrund Papier*/
/* Site background image */
.section-background, .page-section {
    background: transparent !important;
}
body {
   background-image:url('https://static1.squarespace.com/static/6366aa91142406517bac679a/t/6367723f3491af7341a16534/1667723840909/papier.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;
}
/*Ende Hintergrund Papier*/
/*Hintergrund Papier für Titelbanner*/
.header {
background-image:url('https://static1.squarespace.com/static/6366aa91142406517bac679a/t/6367723f3491af7341a16534/1667723840909/papier.jpg');
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}

Link to comment
2 hours ago, Stefan G said:

I had this code working and now all of a sudden it doesn't anymore.

The downside of custom code. SS made changes to the structure of backgrounds recently.

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take 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

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.