How to set a background image in reactjs?

You need to store your images in the public folder of your project. You can refer to the public folder using a forward slash / and access your images from there.

For example:

<img src="/background.jpg" />

You can do the same in a CSS File:

.background {
   background-image: url("/background.jpg");
}

Background should be already a String:

backgroundImage: "url(" + Background + ")"

You can also use ES6 string templates:

backgroundImage: `url(${Background})`

you should read this it might help -

https://www.davidmeents.com/blog/how-to-set-up-webpack-image-loader/

You need to store your images in the src folder of your project. You can refer to the image inside your css file which should be also in the src folder using "./"

For example: your image in this directory "src/images/background.jpg"

then you can refere to it inside your css file (which is located in "src" folder) in the following way:

.background {
   background-image: url("./images/background.jpg");
}

Pure ReactJS and Inline CSS

If you are looking for a direct approach and using a local File in that case. Try

import Image from "../../assets/image.png"

<div
style={{ backgroundImage: 'url(' + Image + ')', backgroundSize: 'auto' }}
>Background Image
</div>

This is the case of ReactJS with inline styling where Image is a local file that you must have imported with a path.

Here is a simple github repository, I have created for putting background image to body tag. This example does not have any changes/plugins added in webpack config specifically for css.

In your code, if you have similar repository structure as mine then it could be a path issue. Hope this solves your query.

I've consistently had problems getting webpack to properly load background images. Maybe it's fixed in webpack 2, but I'm not using it yet. I have fallen back to using the copy-webpack-plugin to copy images to a directory, and then referencing that location in CSS.

new CopyWebpackPlugin([
        { from: './src/images', to: 'images' }
])

CSS:

.Logo {   background-image: url(./logo.png); }

React:

import React from 'react';
import logo from './logo.png';  // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png

function Header() {   // Import result is the URL of your image  
  return <img src={logo} alt="Logo" />;
}

export default Header;

you need to put the image file in the public folder, then try

background: url(./logo.jpg) no-repeat;

folder structure be like

public -- logo.jpg

It's because you are using webpack, you may write your stylesheet in a css or scss files. it means that you will import it in your app.js. so webpack will use sass-loader or css-loader to bundle your css files when you are in develop environment.

So it will not work immediately, the browser will load your bundle.js first, exec js file, generate stylesheet and insert them into header.

If you want to work immediately, you should write your stylesheet in your html file.

And remember it also take some time to load your background image.

Discovered this by trial-and-error. The key is to refer to the height and width property tag of an tag which automatically resizes the dimensions.

React

import React from "react";
import backgroundFinalStyle from "../../style/styled-css/background-style";
import i from "../../assets/media/calendar.jpg";

const StillBackground = (props) => {
  const FullscreenVideoWrap = backgroundFinalStyle.fullscreenVideoWrap;
  const ImgFull = backgroundFinalStyle.imageFull;

  return (
    <FullscreenVideoWrap>
      <ImgFull>
        <img height="100%" width="100%" src={i}></img>
      </ImgFull>
    </FullscreenVideoWrap>
  );
};

export default StillBackground;

background-styles.js

import styled from "styled-components";

const FullscreenVideoWrap = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  min-width: 100%;
  min-height: 100%;
`;


const ImgFull = styled.div`
  position: absolute;
  z-index: -100;
`;

const backgroundFinalStyle = {
  fullscreenVideoWrap: { ...FullscreenVideoWrap },
  imageFull: { ...ImgFull },
};

export default backgroundFinalStyle;