0

I'm new to set up webpack with React environment. The issue I have now is that background-size and background image do not work for the background image I set in react component. It worked when I set background-image and background-size and position in the same file. in other words, when I set the image in component, and define background-size and position in scss, it does not work. I believe my webpack setting cause this issue.

-webpack-

  {
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
  },
  {
    test: /\.s[ac]ss/i,
    use: ['style-loader', 'css-loader', 'sass-loader'],
  },
  {
    test: /\.(png|svg|jpg|gif)$/,
    use: ['file-loader'],
  },

-component-

  <div className="image"
    style={{
      background: `url(${imageUrl})`,
    }}/>

-scss-

.image {
        width: 100%;
        height: 95%;
        background-size: cover;
        background-position: center;
        margin-bottom: 5px;
      }

With this source, the result I got is that image was displayed, however the image does not cover.

ShinCat
  • 139
  • 3
  • 12

1 Answers1

0

Image does not cover because you override background properties with inline background default styles. Remember that inline style has the biggest priority here.

Instead of: 

<div className="image"
    style={{
    background: `url(${imageUrl})`,
}}/>

define background-image:

<div className="image"
    style={{
    background-image: `url(${imageUrl})`,
}}/>
Marcin Maleszewski
  • 135
  • 10