How to set a background image for footer

[itslaura123]

Hi,

I’m using the Ritual theme version 3.2.1. I’d like to upload my own image and use it as a background for the footer section. If a custom coding is required, what and where should I add it?

Your response will be appreciated

[Custom-Cursor]

Can you share your store url please.

[tim_tairli]

You can do this:

1. Upload your image to the Content->Files area

2. Copy URL of this image:
   

   

3. In your theme go to Theme Edit-> Theme settings (cog icon)

4. Paste this code into “Custom CSS” setting:

footer {
  background: url(an URL you've copied);
  background-size: cover;
}

This code will zoom in your image to cover entire footer area – this may lead to some image cropping.

[suyash1]

@itslaura123 it can be done using css, can you please share your website URL?

[mastroke]

just upload your background image either in files or assets from coding

then just add this css

footer {
background: url('img link');
background-size: cover;
background-repeat: no-repeat;
}

[devcoders]

Hi @itslaura123

If the Ritual theme settings do not provide an option to add a footer background image, this can be done with custom code.

First, upload your image in Settings → Files and copy the image URL.

Then go to Online Store → Themes → Edit Code and check the footer section file (such as footer.liquid or sections/footer-group.liquid).

After that, add the following CSS to your stylesheet (such as base.css or theme.css):

.footer {
  background-image: url('YOUR_IMAGE_URL');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Replace YOUR_IMAGE_URL with your uploaded image URL.

If the footer uses a different class name, you may need to inspect the element first to identify the correct selector.

Best regards,
Devcoder

[websensepro]

Hi @itslaura123 ,

You can easily add a background image to your footer by following these quick steps:

1. Upload the Image: Go to Shopify Admin > Content > Files (or Settings > Files), upload your background image, and copy its URL.
2. Access Theme Files: Go to Online Store > Themes > click the three dots (…) next to your active theme > Edit code.
3. Add the Code: Under the Assets folder, open base.css or theme.css. Scroll to the very bottom of the file and paste the following CSS:

.site-footer, footer {
  background-image: url('YOUR_IMAGE_URL') !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Hope this helps!

Thanks!