CSS background-image renders fine in Safari, but not Firefox or Chrome

[n8sabes]

A background-image in Layout.css will not render correctly in Firefox or Chrome, but does render correctly in Safari.

I have created a fork of master that adds only a background-image to Layout that demonstrates the problem.

Fork189-n8sabes/react-static-boilerplate
See:

• /components/Layout/Layout.js
• /components/Layout/Layout.css
• /public/assets/.

It is unclear as to the cause and may very well be an oversight on my part.

Inline style works fine, but this is impractical as a global project solution.

[n8sabes]

This is a known webpack problem. I have a temporary workaround, but you have to rebuild anytime you change the publicURL (or port). Additionally, I can only make it work with relative paths, not absolute paths in RSB. Here is the workaround:

1. webpack.config.js must set the publicURL to the full path. publicPath: 'http://localhost:3000/dist/', but this doesn't work serving it up from another port.
2. I've gotten the url to work with a relative path, but not an absolute path. background-image: url("../../public/assets/bg_pattern.jpg");

Here are a few discussions on the issue:

sourceMap css does not function for background-image (maybe stylus-loader issue)

Generated image urls must be absolute for style!css?sourceMap to work?

Webpack - background images not loading

[LeBenLeBen]

I have the exact same issue, setting the publicPath solve the problem but as I want to test from other devices on the same network I don’t want to hardcode it. I ended up disabling sourceMaps for now which also solves the problem. Thanks for the hint !

[x4080]

Hi, I have the same issue, and even strange is using your fork and change in webpack.config.js, the background is still not appear this is what I changed

  output: {
    path: path.resolve(__dirname, './public/dist'),
    publicPath: 'http://localhost:3000/dist/',
    filename: isDebug ? '[name].js?[hash]' : '[name].[hash].js',
    chunkFilename: isDebug ? '[id].js?[chunkhash]' : '[id].[chunkhash].js',
    sourcePrefix: '  ',
  },

(PC-Chrome and firefox)
Am I doing something wrong?

Thanks