Jump to content

Overlapping image over two sections

Recommended Posts

Site URL: https://flute-badger-27hy.squarespace.com/

I'm what seems like 99% of the way there, but am stuck. I'm trying to overlap an image across two sections like this, and was able to find a handy walkthrough here: https://thirtyeightvisuals.com/blog/overlapping-logo-footer-brine

However, I'm stumped as the icon overlaps on the bottom section perfectly but seems hidden behind the top section. I've tried z-index to no avail.

(password: bamboo)

Screen Shot 2020-05-11 at 6.00.47 PM.png

Screen Shot 2020-05-11 at 6.01.57 PM.png

Link to comment
  • Replies 13
  • Created
  • Last Reply

Top Posters In This Topic

  • 5 months later...
  • 2 years later...

Hi @tuanphan we are working on a site that has diamonds that overlap a top and bottom section and depending on the screen size the overlap is perfect in some cases, but even transferring from a desktop to a laptop the slightest change in screen size moves the image. Is there a better way to execute this besides px or % to the top margin? Let us know. We'd appreciate your help. The URL is https://cobalt-saffron-k33w.squarespace.com/ the password is DoveLove2023!

Link to comment
On 1/12/2023 at 11:56 PM, Dovely2023 said:

Hi @tuanphan we are working on a site that has diamonds that overlap a top and bottom section and depending on the screen size the overlap is perfect in some cases, but even transferring from a desktop to a laptop the slightest change in screen size moves the image. Is there a better way to execute this besides px or % to the top margin? Let us know. We'd appreciate your help. The URL is https://cobalt-saffron-k33w.squarespace.com/ the password is DoveLove2023!

Hi,

Can you take a screenshot of image?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 1/16/2023 at 9:42 PM, Dovely2023 said:

Yes. Please see below. The bottom is the site currently and the top is how it should display. Thank you again!

Screenshot 2023-01-16 at 8.41.39 AM.png

Screenshot 2023-01-16 at 8.41.28 AM.png

You mean this image?

image.png.d3e4661e97cd53b7f5a9deb003b16764.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 1/18/2023 at 5:25 PM, tuanphan said:

You mean this image?

image.png.d3e4661e97cd53b7f5a9deb003b16764.png

Yes. It looks perfect in some screens but it others it gets completely shifted up or down. Any help would be greatly appreciated. Thank you.

Edited by Dovely2023
Link to comment
On 1/26/2023 at 11:37 PM, Dovely2023 said:

Hi @tuanphan just following up on the above question. Any ideas?

Sorry. Had some days off for Lunar New Year

Your site is expired. You can contact this link to extend it for free

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.