How to upload a custom back ground you have created to shopify using section custom CSS code please

Store Design
, , , , , , , , , , , ,

Topic summary

A user is attempting to add a custom background image to specific sections of their Shopify store using CSS code but encounters persistent errors.

They’re using the standard CSS syntax:

.section {
  background-image: url('IMAGE_URL');
  background-size: cover;
  background-position: center;
}

The Problem:

  • The user uploads images to Shopify’s Files section and copies the generated link
  • When pasting this URL into the custom CSS code, they receive errors (shown in screenshots)
  • The issue occurs with both single quotes (') and double quotes (")
  • Previously working images now also fail to load
  • Problem persists across different themes (Dawn and Craft 15.2.0)

Current Status:
The issue remains unresolved. The user has provided screenshots showing the error messages and their CSS code implementation, but no solution has been identified yet for why Shopify’s file URLs are being rejected in the custom CSS.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

hi there,

i am trying to upload an image i have created to be the background on some sections of my store. I am having trouble with the custom CSS code as i do not know how to tell it to select an image and use this as the background with in a section..

can anyone advise please?

thank you so much!!

2

Hi @BookWyrmsTrove ,

Thank you for reaching out to the Shopify community. I’d be glad to assist you. Could you kindly share your store URL and
password (if it’s password-protected) so I can review it and provide you with an update?

3

i dont feel comfortable giving out my store password at all. But my store url is bookwyrmstrove.com

4

Hi @BookWyrmsTrove ,

You need to add custom CSS code in the section where you want the image as the background. In the Custom CSS area of your theme settings, add the code along with the image URL for that specific section.

Example:

.section {
  background-image: url('YOUR_IMAGE_URL');
  background-size: cover;
  background-position: center;
}
1 Like
5

Screenshot 2025-01-30 121512.png
Screenshot 2025-01-30 121512.png563×1225 58.5 KB

i have added a picture to help better. I have been using the custom CSS as so , just like your above. The confusion and issue comes when i keep getting this error, but i am not sure why. the url is copied from my shopify - i click on files, select the picture i upload to be the background, and press copy link, and paste it where needed as above.

Any idea why this might be happening?? If it helps i am using craft 15.2.0 theme (i was previously using dawn and having the same problems)

6

BookWyrmsTrove_1-1738239568846.png
BookWyrmsTrove_1-1738239568846.png564×1031 44.1 KB

here’s one of just the code without error message covering it. I have tried using " and ’ to encase the link and it does not like either of them, so im really unsure how to make it apply the code. It has worked earlier with a different image, and now wont work with that one either - it is really quite odd :sweat_smile: