How to set a background image in reactjs?

Question

I have a reactjs/webpack app and trying to set a background image for the bodytag:

body{     background: url("../images/some-background.jpg");     background-size:contain;     background-position:top;     background: cover; } 

However after loading the components the body style is not present in the page.It shows up in the console though. Is there a way to display a background image in the main page whilst having the CSS rule in the CSS file that is loaded by webpack?Is this because reactjs does something I am not aware off?

Answer 1

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"); } 

Answer 2

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/