How can I overlap a PNG image over my main slideshow?

Hello, :waving_hand: I’m Currently Working On New Build for Mycupofearth.com and I’m trying to figure Out how to overlap a png image above my main SlideShow? I would like it to overhang. Any Help Is Sincerely Appreciated. Thanks

@mycupofearth

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

Hello, Thank You for your assistance. site Is not live ATM, working on 3.0 overhaul and update to Refresh theme. i believe I need to add "margin-bottom: -30px; to the image-banner.liquid or maybe html liquid ? somewhere but not sure where. would like to have the blue and white awning over hang all top slideshow images about -30px

@mycupofearth

oh sorry but how can i guide you whit out checking issue

i added

style="margin-bottom: -60px;">

to

it removes the margin space i would like removed but puts the image behind my slideshow instead of layed overtop am i digging in the correct place ?

The Perfect Gift - MYCUPOFEARTH.COM | OFFICIAL SITE – My Cup of Earth

Not sure if this link will let anyone view the unpublished theme I’m working on

I’m not sure if this is the most efficient way to complete the task but added 3 lines of code to achieve the style needed

Assets > component-slideshow.css

slideshow-component {
position: relative;
display: flex;
flex-direction: column;
z-index: 1;

z-index: 1; <----------- added to the bottom of the first block of code

### Assets > section-image-banner.css

.banner {
display: flex;
position: relative;
flex-direction: column;
margin-bottom: -45px;
z-index: 2;

margin-bottom: -45px; <---------- added these 2 lines### z-index: 2; <----------

seems to work fine, but having trouble with png transparency can see the edge not fully transparent. hopefully if anyone finds needing to perfrom such task this will help somewhat will update

![transparent lines|666x558](upload://yPCouMndwaUYIIGItjK9XGmHTtF.png)

Update: You will have to change foreground colour to remove the overlay color that caused the issue. WARNING: the foreground color is var linked to other page elements they will also be set to #transparent, you will have to inspect the other elements that receive the transparent tag and reassign colors to them.