Jump to content

Need to fix border at bottom of full-page background image

Recommended Posts

I have a full-page background image, except the last section on the page needs to be opaque. I'm trying to add a curved border to separate the two but it looks janky.

Site: https://tortoise-paddlefish-lj6z.squarespace.com/services

PW: feather

I have this in the header code injection: 

.section-background, .page-section, .section-border {
    background: rgba(12, 81, 66, 0.5) !important;
body {
   background-image: url(https://static1.squarespace.com/static/63f8cf4d9f5c2418c319eaa5/t/640902e5db3b2536863f098c/1678312166703/ambilimon-annamala-poosari-eCaTObQxJ1w-unsplash.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;}


And in the Custom CSS I have this to fix the last section:

//last section opaque
section[data-section-id="64025f78fa164317f8f68f50"] .section-background {
  background: @ltbeige !important; }


But the border at the bottom of the last section before the opaque section is messed up. Is there a way to fix it?

Edited by JFRedmondStudio
Link to comment
  • Replies 2
  • Views 148
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Thanks, @tuanphan -- I just made it straight to present to the client, but here's a screenshot of how it looks with the curved border we wanted. The image doesn't extend to the border, and the color in the last section (which is set by CSS) doesn't extend up to the border. Client needs to launch site early next week, so for now we're leaving the borders straight -- but is there a way to fix this? 

(Some of the pages have a single background image running across multiple sections, and that's what doesn't play well with the new border options.)


Edited by JFRedmondStudio
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.