Jump to content

Custom Section Dividers in Squarespace

Recommended Posts

Site URL: https://brass-sepia-454p.squarespace.com/

Hi,

I'm trying to create a custom section borders by creating an image and positioning it above the section. I created an SVG wave here: https://getwaves.io/ and get this code:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#74C2CB" fill-opacity="1" d="M0,64L80,85.3C160,107,320,149,480,154.7C640,160,800,128,960,122.7C1120,117,1280,139,1360,149.3L1440,160L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path></svg>

and I'm using this code to place it on the page:

#your-section-id-here {
  background: #DE551B;
  overflow: visible;

  &:before {
    content: '';
    width: 100%;
    height: 100%;
    background-image: url(ADD URL);
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    top: 0;
    margin-top: 1px;
    transform: translateY(-100%);
    pointer-events: none;
    z-index: 1;

    @media screen and (max-width: 800px) {
      background-size: 200% 50%;
    }
  }

  &:after {
    content: '';
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    background-image: url(ADD IMAGE URL);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top;
    margin-bottom: 1px;
    transform: translateY(100%);
    position: absolute;
    pointer-events: none;
    z-index: 1;

    @media screen and (max-width: 800px) {
      background-size: 200% 50%;
    }
  }
}

Question is: where does the SVG wave code go into the CSS code? The CSS asks for a URL but I don't have that. Is there a fix for this??

 

Thanks!

Link to comment
  • Replies 1
  • Views 851
  • Created
  • Last Reply
On 6/26/2021 at 2:28 AM, aurevoirblue said:

Site URL: https://brass-sepia-454p.squarespace.com/

Hi,

I'm trying to create a custom section borders by creating an image and positioning it above the section. I created an SVG wave here: https://getwaves.io/ and get this code:


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#74C2CB" fill-opacity="1" d="M0,64L80,85.3C160,107,320,149,480,154.7C640,160,800,128,960,122.7C1120,117,1280,139,1360,149.3L1440,160L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path></svg>

and I'm using this code to place it on the page:


#your-section-id-here {
  background: #DE551B;
  overflow: visible;

  &:before {
    content: '';
    width: 100%;
    height: 100%;
    background-image: url(ADD URL);
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    top: 0;
    margin-top: 1px;
    transform: translateY(-100%);
    pointer-events: none;
    z-index: 1;

    @media screen and (max-width: 800px) {
      background-size: 200% 50%;
    }
  }

  &:after {
    content: '';
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    background-image: url(ADD IMAGE URL);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top;
    margin-bottom: 1px;
    transform: translateY(100%);
    position: absolute;
    pointer-events: none;
    z-index: 1;

    @media screen and (max-width: 800px) {
      background-size: 200% 50%;
    }
  }
}

Question is: where does the SVG wave code go into the CSS code? The CSS asks for a URL but I don't have that. Is there a fix for this??

 

Thanks!

try this solution, first save svg into .svg file and upload to this tool to convert it into base64 background image

SVG to Base64 | Image | Base64 Encode | Base64 Converter | Base64

image.thumb.png.635a542938bf1757895f88102ed3d34e.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.