Jump to content

Graphic transition between sections

Go to solution Solved by jpeter,

Recommended Posts

  • Replies 2
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

@mackenzieu The CSS below should do the trick. You can play with the height CSS property with the 30px value to adjust the amount clipped from the bottom.

CSS

/* Clip wave image from the bottom */
#block-yui_3_17_2_1_1706127503146_48723 img {
  object-fit: fill !important;
  object-position: top !important;
  height: calc(100% + 30px);
}

/* Make wave image span entire width of page */
#block-yui_3_17_2_1_1706127503146_48723 .fluid-image-container {
    width: 100% !important;
}

See article on how to add CSS if you're not sure how. 

Here's a screenshot of it working:
image.thumb.png.9b853dc87f0c35d295f1f49393069f47.png

Edited by jpeter

Full stack developer who loves helping people out with anything web related. If you'd like to support me, 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.