React path to public folder in css background image

you can import that image as

import Background from './Screenshot_11.png'

and use

background-image: `url(${Background})`

This still does not work for me with images in the public folder.

UPDATED 19 March 2021

Regarding using of <ROOT/public/images> in .css files.

It appears to be a breaking change (will be considered as a bug?) in create-react-app (react-scripts) package v4.x.
And more precisely in package 'css-loader' v4.x.
3.x branch works OK with that.

Here is the corresponding issue on the github repo:
https://github.com/facebook/create-react-app/issues/9870
(and there are few more actually).

No fixes (yet). (will be?..)
But a few workarounds mentioned there. Which one to use... it depends on your project, I suppose.

Some of workarounds:

• downgrade to react-scripts 3.4.x

• don't use url in CSS files :) you still can use in .JSX (inline styles). Or put in .html. They are obviously not processed by css-loader.

• reconfigure webpack to add url:false to css-loader options (either eject CRA or use this: https://github.com/gsoft-inc/craco or this: https://github.com/timarney/react-app-rewired (you can find sample configurations at the github issue page)

• use this new feature of css-loader https://github.com/webpack-contrib/css-loader/pull/1264 (released in 5.1.0, current last version is 5.1.3; to use that version you can add the following to the package.json: "resolutions": { "css-loader": "5.1.3" } (at root level) )

They have changed that but I don't know why. Working path:

background-image: url('/Screenshot_11.png');

EDIT 2021

For people who think that it doesn't work:

https://codesandbox.io/s/agitated-turing-gsnr3