CODEWITHSUNDEEP
reactjsecmascript-6
Anurag Awasthi
Anurag Awasthi

Reputation: 6233

setting background-image from props not working

How can i set background-image from props. I tried different variations but cant get it to work. css is showing in html but image is not being displayed.

const cover =   "http://www.w3schools.com/css/trolltunga.jpg";

class App extends React.Component {
  render(){
    return(
      <div>
        <h2>Hey</h2>
        <Child image = {cover} />
      </div>
    )
  }
}

class Child extends React.Component{
  render(){
    const style = {
      backgroundImage: "url("+this.props.image+")",
      backgroundSize: "100% 100%"
    }
    return(
      <div style={style}></div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("app")
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>

<div id="app"></div>

Upvotes: 3

Views: 4306

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104529

Problem is ur div is empty, thats why background image is not visible. put some content inside that, it will be visible, Try this:

<div style={style}>Add background</div>

check the jsfiddle, ur code is working properly. I just added the above line in that: https://jsfiddle.net/0z38gozj/

Upvotes: 3

Related Questions