Insert Image Background In Footer And Footer Dimensions

Store Design
1

Hi, I want to put an image as the footer background. I’m making my footer in Canva.com and I’ll also like to know what height and width I should choose.

my url is:https://thesnoozy.com/

password: 123

1 Like
2

Hi @GeorgeRizos ,

You can refer to the code below to add a background image to your footer.

SAVE the image and get the link:

  1. From your Admin Page, click Settings on your left hand corner.
  2. Click Files > Upload files.
  3. When you are done uploading, click the chain to Copy the link.

Add the code to the theme:

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the base.css
  3. Paste the code below at the very bottom of the file.

NOTE: replace the link inside the url() to the link you copied.

footer.footer.color-background-2.gradient.section-footer-padding {
    background-image: url(https://cdn.shopify.com/s/files/1/0568/5012/0868/files/made4uo-logo_circle_4ba1f371-a727-47b1-88b8-13d1de8c2f9e.png?v=1651772347&width=50);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

The image size varies on screen sizes

3

hi @made4Uo , sadly it’s not working.

4

@PageFly-Victor

5

@GeorgeRizos The dimension of your footer is 1583x465

6

@GeorgeRizos Please follow this steps

  1. From your Admin Page, click Settings on your left hand corner.
  2. Click Files > Upload files.
  3. When you are done uploading, click the chain to Copy the link.

and than go to footer.liquid file

please add img src code under the this div

7

My image is an SVG file, do you do the same for that?

8

please convert this into png

using this site to convert https://svgtopng.com/ your img