Shared (one) background for 2 sections CSS

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!

Hi,

Which sections are you referring to?

Hi @tuanphan,

Sorry, the content has changed a bit since I posted the original message.

These two sections, on the https://gromovaphoto.squarespace.com/about page

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)?