I have added a class in react ponent.
CSS file:

.bg{
   background: url('../img/bg.jpg');
   border: 2px solid black;
}

React render method:

  render() {
   return (
    <div>
      <div className="bg">
       Hey This
      </div>
    </div>
  );
}

The browser shows the border and loads the image but image is not visible.

The screenshot is as follows:

Can anyone tell me what I am doing wrong?

I have added a class in react ponent.
CSS file:

.bg{
   background: url('../img/bg.jpg');
   border: 2px solid black;
}

React render method:

  render() {
   return (
    <div>
      <div className="bg">
       Hey This
      </div>
    </div>
  );
}

The browser shows the border and loads the image but image is not visible.

The screenshot is as follows:

Can anyone tell me what I am doing wrong?

• javascript
• reactjs

• 2 The image data is being embedded into the class by your bundler tool so it cannot be an issue with path resolution. You haven't added the background image to the question content, so I don't know if it has some transparent regions around it. You should try making the div bigger to see if the image starts to appear. You would also need to set background-repeat and background-position depending on how your background image is. – hazardous Commented Feb 9, 2016 at 6:45

7 Answers 7

This is most likely happening because div.bg does not have a height specified. Because of this, its height fits the text content exactly.

Background images of any size have no affect on the sizing of their parent element. If your goal is to be able to see the entire image, you need to specify a height for div.bg that matches the height of the original image.

Your .bg div is currently of size 0x0 px, this is why the image is not showing. Specify a width and a height to see the image.

For example:

.bg {
    height: 300px;
    width: 300px;
}

Or more preferably use 100% to have the entire image fit in the div.

.bg {
    height: 100%;
    width: 100%;
}

As a side note: make sure your background image is not too large and takes much time to load. Large background image size can lead to very bad user experience. Consider using a png image, small image with the repeat attribute, or an svg.

Try changing the background to background-image. Also give the bg class a height and a width. Then finally specify background-size to probably cover. An example would look like

.bg {
  background-image: url('../img/bg.jpg');
  background-size: cover;
  border: 2px solid black;
  height: 300px;
  width: 300px;
}

This should work as I have tried it.

background-size: contain;

Not sure what the image is, but this would size the image to fit the current div height defined by the text.

Place the img folder in public folder

.css
background: url('/img/bg.jpg');

or

.js
var logo=require("../img/Logo.svg");
<img src={logo} alt="logo"/>

Have you tried switching from background: url('/img/bg.jpg'); to background-image: url('/img/bg.jpg');

It's very important to set height, but not in %

Example provided by Yuval is correct and worked fine.

.bg {
   height: 300px;
   width: 300px;
}