Jump to content

How To Overlap an Image Between Sections 7.1

Recommended Posts

Site URL: https://earthboundbabies.squarespace.com/

Hi there,

I've looked through all the other questions on this topic but still can't find a solution. 

I want to overlap an image between 2 sections in SS7.1. 

https://earthboundbabies.squarespace.com/

password: hello123

---

So I'm looking to bring the pink logo up to sit between the top banner image and the second section with cream background. 

Any help would be greatly appreciated! 

Anna 🙂

Screen Shot 2021-01-18 at 11.20.40 am.png

Link to comment
1 hour ago, AnnaOS said:

I'm looking to bring the pink logo up to sit between the top banner image and the second section with cream background. 

As the logo has the ID "block-yui_3_17_2_1_1610731993235_6249" you should be able to nudge the logo up by using something like this in your Custom CSS:

/* Move specific logo up the page */
#block-yui_3_17_2_1_1610731993235_6249 {
top: -185px;
}

Of course, this will leave a gap on the page where it used to reside, so you may need to adjust the top padding of this section afterwards, depending on the effect that you want.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Heya @paul2009, thanks for that! It went up to in between the two sections - what code would I use to decrease padding at the top of that section (section[data-section-id="60007d57df80a433129f96fa"])

I've tried a few different codes from this thread but didn't work: 

 

Thanks,

Anna

 

Link to comment
25 minutes ago, AnnaOS said:

What code would I use to decrease padding at the top of that section (section[data-section-id="60007d57df80a433129f96fa"])

I took your last question literally - move the logo only 🙂. If you want to move the entire section up, including the logo (thus reducing the gap too), it would be better to use something like this instead:

section[data-section-id="60007d57df80a433129f96fa"].page-section.vertical-alignment--middle:not(.content-collection):not(.gallery-section):not(.user-items-list-section).section-height--small>.content-wrapper {
    top: -130px;
}

 

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 2 months later...

Hi Paul

@paul2009 Following up on this. I wonder if you could advise how I could put a PNG image on top of an image in 7.1 please? Directly on top in the centre. It seems like such a simple thing, but none of SS7.1 image types seem to allow it.

The only way I can do it is to make the bottom image a background of a whole section and the image should be smaller than that. I guess I could try to bring the margins in of that one section? I think I must be missing the obvious though.

The reason I want to layer the png on top of the background image is because it contains script font text and for responsive reasons would be better as an overlay. Saving it directly on top of the bottom image is my last resort.  

Thanks

Link to comment
2 minutes ago, Sarah-W said:

I wonder if you could advise how I could put a PNG image on top of an image in 7.1 please?

You'll need some code to achieve this, most likely CSS (styling code). 

If you add each image in an Image Block, you can then use code to move one of the images so that it is positioned on the other.

 

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 1 year later...

Hey @paul2009 I have followed along with this tutorial on this page: https://www.byapril.co/about it was working, but in the last few weeks SS has changed and now this seems to not work (the overlap is hidden behind the section below) Ive also noticed a couple of sites I was using for inspo have since experienced the same thing - do you have any way via css to tell one section to site over the other?

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.