How To Overlap an Image Between Sections 7.1

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 🙂

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.

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

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

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

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.

@paul2009 Hi Paul, thanks so much for getting back to me. It confirms that there isn't a more obvious way. I think I can work out on the code required based on some tutorials for overlapping images. You've saved me a lot of time and I'll try with CSS.

Best regards & have a lovely day.

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?