require image in CSS

In header.jsx, we can require a image like,

<img className="Header-brandImg" src={require('./logo-small.png')} />

Is it possible to require a image in CSS? Something like:

.HomePage-container H1:before {
  content: url({require('/images/test.png')});
}

<bountysource-plugin>

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource. </bountysource-plugin>

[cwtuan]

I find out the solution: just use the relative path so that webpack will resolve the path:

Use this:

.HomePage-container H1:before {
  content: url('../../public/images/test.png');
}

Don’t use this

.HomePage-container H1:before {
  content: url('/public/images/test.png');
}

[cwtuan]

Let me clarify the question:

Since my images will be deployed in CDN, I set the config in webpack.config.js like

config.output.publicPath = "http://mycdn.com/"

All my images are located at public/images, so I need ‘require’ method to add domain name for the images. It’s easy to require a image in JSX, like

<img src={require('../../public/images/logo-small.png')} />

Then it will be compiled to

<img src="http://mycdn.com/1fd0cda7af8115026a64413a9b9027b5.png" />

But I can’t figure out how to require a image in CSS. I need something like this:

.HomePage-container H1:before {
  content: url({require('../../public/images/logo-small.png'))});
}