How to add image to footer that starts before footer

Store Design
1

Would anyone know how to write custom code for me to upload a png image so that part of the image sits just above the footer, and part of the image sits inside the footer, like in this example of this website:

https://emrodesigns.com.au/pages/about-us

My store URL is: www.sandraleedesigns.com and i would like to do something similar to this with my footer. please can anyone please help me? Do i just upload the PNG image as an asset? and then add custom coding in the footer to display the url link of the image and the spacing of where it is to sit alon

2

Roughly you’d need to add the asset/media/image either to the stores files admin , or into the theme assets.

The former if it’s something static to the brand to be used among multiple themes.

The latter if it’s only used in the theme and will not be frequently changed.

There’s also the more advanced option of creating a theme setting, see the Dawn theme reference source for how it handles logos .

Then reference that asset in liquid with a hosted-file filter

https://shopify.dev/api/liquid/filters/hosted_file-filters

In a set of absolutely positioned CSS rules updated with the right selectors for the footer.

Always backup themes before changing code.

Add something like the following to the themes CSS file.

.footer{ position: relative; }
.footer::before {
    background-image: url({{ 'footer-overlay.png' | asset_img_url }} );
    background-size: contain;
    content: '';
    height: 100px;
    pointer-events: none;
    position: absolute;
    left: 100%;
    top: 0%;
    transform: translate(-50%, -50%);
    width: 100px;
    background-repeat: no-repeat;
}

If you need it customized you can contact me directly, info in forum signature please provide context: any post urls, store name, theme name, project detail.