Custom Section Dividers in Squarespace

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!

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