Webpack - background images not loading

Question

I\'m fairly new to webpack but having some problems with css-loader or file-loader.

I\'m trying to load a background-image but it doesn\'t work quite right. The bac

Answer 1

Please try using, for example:

html {
   background: url(~/Public/img/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

css-loader in webpack:

{
    test: /\.(css|eot|svg|ttf|woff|jpg|png)$/i,
    use: ExtractTextPlugin.extract({
        use: [{
            loader: 'css-loader',
            options: {
                importLoaders: 1,
                minimize: true
            },
        }],
    }),
},

Result in bundle.css is:

html{background:url(/Public/img/bg-picking.jpg) no-repeat 50% fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}

Answer 2

Webpack generates the css and <link>s them via blob: urls, which seems to cause issues with loading background images.

Development workaround
Inline the images via the file-loader in development (creates large base64 string in the css)
But allows for hot-reloading.

Production workaround
Use the ExtractTextPlugin to serve the css as normal file.