Jump to content

Customize section background to have split color.

Recommended Posts

I like how this image is sitting between two color sections. I want to achieve similar results with Squarespace 7.1
(here is an original website - where the image is from)

I was thinking the easiest way is to split one section background in 2 color zones. (I could upload PNG background image with two color zones but I am afraid it may get blurry on some screens) Ideally, I would like to achieve this with CSS color fill.

Screenshot 2023-10-31 at 12.40.41 AM.png

Link to comment
  • Replies 3
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

You just need to use a shape block and put it behind half of the section. Make sure you have the section set to fill screen so the grid goes top to bottom, and you can then extend that shape block to the very top, left and right.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
11 minutes ago, Ziggy said:

You just need to use a shape block and put it behind half of the section. Make sure you have the section set to fill screen so the grid goes top to bottom, and you can then extend that shape block to the very top, left and right.

Thank you for suggestion - I have tried that just now and it seems working. However it does require me to adjust position of that shape for desktop and then for mobile view every time. I would prefer to use a code solution to this.

Link to comment

Use this code, and add a gradient with a hard change:

https://www.heathertovey.com/blog/gradient-backgrounds/#version-7-1

Like this linear gradient:

background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(0,0,6,1) 50%, rgba(193,67,67,1) 50%, rgba(193,67,67,1) 100%);

Use this tool:
https://cssgradient.io/

image.thumb.png.030fb2a43f1b61fe09d45535523a93bf.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.