Jump to content

Shared (one) background for 2 sections CSS

Recommended Posts

Hi everyone,

I am pretty new to Squarespace as well as its CSS and can't get, how to properly create a shared background for 2 sections. I am mainly interested in the following: having a gradient background starting from the top of the section:

"You should probably know" section[data-section-id="6419714a27dc5f7ed295827e"] 

and ending just before the footer, in the bottom of section:

"All about/not about" section[data-section-id="641989c5f066bc053d946bb3"]

so the transition of the colour will be smooth.

I've already tried a few options with having a page-wide gradient applied (applying it to .site-wrapper and using empty .section-background classes), however, that doesn't seem to be the right way.

URL: https://gromovaphoto.squarespace.com/
Pass: swiss

Appreciate any help!

Edited by gromova_photo
Link to comment

I've already found how to achieve what I wanted initially, so the code is following (colors are changed for a better visibility):

section[data-section-id="6419714a27dc5f7ed295827e"] .section-background {
  background: linear-gradient(to bottom, #f7ebe1 0%, #928b86 100%);

section[data-section-id="641989c5f066bc053d946bb3"] .section-background {
  background: linear-gradient(to bottom, #928b86 0%, #282828 100%);

However, question is that to achieve that I was required to use an “intermediate” color which was manually defined, while I was searching for a solution to use only starting and ending colors, is there anything like this possible (to "merge" the background of 2 sections)? 

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.