Inline style is not working ReactJS

From DOC:

In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string.

So instead of background-image use backgroundImage.

For example:

padding-top      --->     paddingToppadding-left     --->     paddingLeftmargin-right     --->     marginRight...

How to specify the inline style?

We need to pass a object to style attribute which will contains all the values in form of key-value pair.

Like this:

<div     style={{       backgroundImage: 'url(../images/WinterCalling_2016.jpg)',        marginTop: 20}}>

Update:

We can use template literals to pass a variable inside url, like this:

<div style={{backgroundImage: `url(${image1})`}}>

React follow the camelcase convention so you have to change background-image to backgroundImage instead.

For more info, the documentation is here.

If you want to use the style property, please provide a JavaScript dictionary object. However, the style key for background-image is backgroundImage.

<div     className="single_slide"     style={{backgroundImage: 'url(../images/WinterCalling_2016.jpg)'}}>