[Bug]: Unable to add background image via CSS

[patrickbjohnson]

Operating system

Mac OS

Node.js version

12.18

Shopify CLI version

2.0

Browsers

No response

Version

3 (Legacy)

Modifications

No response

Details

Attempting to reference an image within the assets folder in our CSS to create a hard-coded background image but its failing. Any suggestions?

Notice

• [X] I read the notice

[sergejcodes]

It's not possible to add an image (from the assets directory) with a relative path to the CSS inside the src directory. Shopify uploads all assets to a CDN and generates a random path for the assets. Webpack has no way of knowing what that path might be. There are a couple of options to circumvent this:

1. If your image is small (a couple of kb), you can convert it to base64 and embed it directly into your CSS file. There're some online tools for that.
2. You can upload your image to Shopify files and add the absolute URL to your CSS.
3. You can create a snippet file with a style tag and define your styling there. It's pretty much the same process as with Local fonts. See the Local fonts docs page

[TomJacobsUK]

It's not possible to add an image (from the assets directory) with a relative path to the CSS inside the src directory. Shopify uploads all assets to a CDN and generates a random path for the assets. Webpack has no way of knowing what that path might be.

The CDN that Shopify generates isn't that random when you account for the CSS file being in the same location. A background URL can reference a static asset relatively by using background-image:URL(some.static.jpg);

Assets that need to be run via Webpack can use resolve alias to locate the files through Webpack, the assets that are generated are moved to the asset directory and relatively referenced too, depending on your config it can also base encode certain assets based on file size.

Great toolset btw was in the process of building my own, but I look to contribute to this project instead.

[sergejcodes]

This is probably the right solution in this case. But last time I checked this method, it didn't work (Theme Lab version 4 and up), because Shopify CLI has currently a bug regarding binary file uploads see issue

[TomJacobsUK]

I have it working with SVGs currently so haven't come across that issue yet, but it's likely once that bug is resolved it should work for other files.