title: How do you pass an image to a styled component?
body: <p>I'm using <code>styled-components</code> in <code>ReactJS</code> and I'm trying to create a component that can take in the <code>background-image</code> as a prop. After some research, I've tried this:</p>
  
  <pre><code>import SpeechBubble1 from '../images/home_images/Speech 1.png';
  ...
  
  const SpeechBubble = styled.div`
      background-image: url(${props =&gt; props.background});
  `;
  
  ...
  
  &lt;SpeechBubble background={SpeechBubble1} /&gt;
  </code></pre>
  
  <p>But it doesn't work. Checking in the browser element window, I can see I'm getting an <code>Invalid property value</code> for <code>background-image</code>. </p>
  
  <p>What am I doing wrong?</p>
  
  <p>Edit:
  I also tried doing this, which hasn't worked: </p>
  
  <pre><code>&lt;SpeechBubble style={{background: `url(${SpeechBubble1})`}} /&gt;
  </code></pre>