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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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;
}

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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.

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

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.