How to add an image to the very bottom of page?

Store Design
1

I am trying to do something like this image in Dawn theme.

nomaco.JPG
nomaco.JPG1916×935 172 KB

2

Hi @racenelson

On the Dawn theme, it should be something like this added to the bottom of your base.css file (assets/base.css):

div#shopify-section-footer {
    background: url(https://cdn.shopify.com/s/files/1/0551/9242/0441/files/Mlouye_video_1500x.png);
}

footer.footer {
    background: none;
}

Replacing the URL of the image between the brackets with an image of your own.

If you can provide a link to your site and image you’d like to use as the background, I could provide some more detail.

Thanks

3

That worked! However, what is the correct way to size the image to the page?

Thank you!

4

Hi @racenelson

You probably want it to “cover” the available space, so amend the CSS to be:

div#shopify-section-footer {
    background: url(https://cdn.shopify.com/s/files/1/0551/9242/0441/files/Mlouye_video_1500x.png);
}

footer.footer {
    background: none;
    background-size: cover;
}

You can read more about the background-size rule and see what the other options are on the MDN Web Documentation here.