How to make an image overlap two sections?

Could someone please help me work out how to set an image to overlap two sections that are divided by a wavy divider rather than a straight line? I can only find tutorials on adding a shape (rectangle) to simulate extending a section in the same colour but I'm unsure of a way around this whilst using the wavy divider? See screenshot. 

I'm not very confident with coding but happy to give it a crack with some assistance!

Thanks in advance 🙂

Jaclyn

@creedon is this something you might be able to help me with? I've seen your name pop up on a few other threads I've been reading through in a search for an answer to my situation 🙂

I don't know if I can help but I can take a look.

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Thanks @creedon! 

https://kazoo-recorder-myj3.squarespace.com/

PW: Th@nkY0u!

It's just the illustrations on Home, Services & About Us page (desktop view) that I'd like to sit between the two sections (on the wave).

Quote

I'd like to sit between the two sections (on the wave).

This is not a solution but a direction you can try. Code is for the About Us page. You can add selectors to the rule-set to expand the effect. The downside to this technique is, there is no intelligence behind the placement.

@media

  only screen and ( pointer : coarse ) and ( min-width : 1025px ),
  screen and ( min-width : 800px )
  
    {
    
      html:not( .squarespace-damask ) #block-yui_3_17_2_1_1693281781254_38351 {
      
        transform : translateY( 50% );
        
        }
        
      }
      

Let us know how it goes.

Thanks so much for this @creedon - It technically did work (see screenshot) but as the original image is sitting up high, I can't reduce the overall banner space/rows to minimise empty space and make the banner look less hectic. Do you know if there's any way around this? 

I'd love for the "About Us" text to be more in line with the womans face if possible. 

I just tried this code: 

Quote

 

@media only screen and (max-width: 640px){ p{font-size:1rem!important} }

@media

  only screen and ( pointer : coarse ) and ( min-width : 1025px ),
  screen and ( min-width : 800px )
  
    {
    
      #block-c9f53ce53f70960728d0 {
      
        transform : translateY( -90% );
        
        }
        
      }

 

Which almost worked (negates the banner heigh issue in my previous reply) - but the illustration is half hiding under the top banner... See screenshot. Is there a way of bringing it forward?

I did not have that problem. Did you view the page in private browsing? What happens there?

I updated the code so it shouldn't be problematic when in the editor. You will need private viewing to see the effect.

Sorry I didn't word my l last reply very well. 

The code you suggested did work (thank you), but has created a huge space above the illustration. So I tried a different code I found online (with the illustration sitting in the second section rather than the top section and changed the transform to -90% so it goes up instead of down). That would have been perfect, except it's hidden part of the illustration (even in incognito). 

Here is a screenshot to the new code you supplied - still having the issue with the large space above the illustration 😞

Slightly different approach for consideration (now that we know you don't want the gap...)

Personally I think that the best option is to have image in the block it's "supposed" to be in. I think with any of the code stuff on these forums its best to try to do as much of it as you can within the way that squarespace works and then to just tweak it. the translate option is great in that transformations happen after the document has laid out so you dont' have to worry about any visibility problems with containers. the side effect is what you're seeing because SQSP has already laid out its section it's set the heights of the main title section thinking the image is in it and now you get the gap. now that we know that you don't want the gap we'd have to change the approach slightly.

Here's what I would do to try to overcome it. again first principle for me is get it as right as you can "the squarespace way" and then tweak it. For me that means putting in an image block in the title area, but what I would do is make it wider than the image needs to be so that we can expand its height and the image will grow into the width, overlapping the divider as the height grows proportionally.

something like this: make sure that you set the image to align left and and to fit its container the image will be smaller as you set it up and then we'll scale it rather than move it. this means that we keep our section height as we want it.

now that you've done that we can get to work. we'll take the image container, remove its hidden overflows and expand its height using a calculation that will add only the height of the section divider. then we just need to check some alignments and we're good. I've put it inside a media query so it doesn't affect your smaller FE layout. There's a calculation in here that's been "escaped" with a "~" so that it will work when pasted into your websites custom css once you've changed the image width layout. (the section id here is for your "about" page, you'll need to change it for others- see below)

@media (min-width:768px) {
    section[data-section-id='64ed67d839b7e01da3e13830'] .sqs-image.sqs-block-alignment-wrapper {
        align-items: start;
        overflow: unset !important;
    }

    section[data-section-id='64ed67d839b7e01da3e13830'] .fluid-image-container.sqs-image-content {
        overflow: unset !important;
        width: 100% !important;
        height: calc(~"100% + var(--divider-height)") !important;
    }

    section[data-section-id='64ed67d839b7e01da3e13830'] .fluid-image-container.sqs-image-content img {
        object-position: bottom left !important;
    }
}

which then gives us this. the image has been scaled up by adding the height of the divider to its container. if you increase the size of the divider the image will scale accordingly. if you want it to go even further you could modify the calculation. to e.g. 150% or something like that.

So to try this on yours, I'd advocate extending the width of the image container as I have and then adding the custom css above, for your about us page that section id is 64ed67d839b7e01da3e13830. try it out and see if you can make it work. section ids can be found with teh squarespace id finder extension.

if you can make it work, then you could edit the other main pages and then extend the css rules to add in those page's section ids. on each of the rules, add a comma and duplicate the bit of the rule before the { e.g.

section[data-section-id='64f1c78c361cb15b5310c54a'] .sqs-image.sqs-block-alignment-wrapper,
section[data-section-id='64ed67d839b7e01da3e13830'] .sqs-image.sqs-block-alignment-wrapper
{
  align-items: start;
  overflow: unset !important;
}