title: Dynamic background image in React.js with styled-components
body: <p>I'm trying to make a react component that has a background image which is provided as a url by JSON. This JSON has multiple objects inside, one of which (let's call it <code>imgObj</code>) has the url in it (<code>imgObj.url</code>).  </p>
  
  <p>Now, I want to use that url for the background image, but fail miserably.</p>
  
  <p>Here's what I'm kind of trying to do:</p>
  
  <pre><code>import React from 'react';
  import styled from 'styled-components';
  
  const Container = styled.div`
      background-image: `url(${props =&gt; props.imgObj.url})` // this is where I think the problem is
  `;
  
  const Component = ({ imgObj, otherStuff }) =&gt; (
      &lt;Container&gt;
          {otherStuff}
      &lt;/Container&gt;
  );
  
  export default Component
  </code></pre>
  
  <p>I tried couple of different variations of <code>background-image</code> line, but can't get it right.  </p>
  
  <p>I am using styled-components here but honestly, I'd be happy with any solution that works.</p>