title: How to render background image in header with Semantic-UI-React <Container>
body: <p>I'm using a Semantic-UI-React theme and want to customize it with an opacity background image that covers the full header. I'll then but a logo and text on top of that. I can't seem to get the image attributes in <code>&lt;Header&gt;</code> working. I've tried many combinations. </p>
  
  <p>Here's my <code>&lt;Container&gt;</code> and <code>&lt;Header&gt;</code> code in <code>React</code>: </p>
  
  <pre><code>  &lt;Container&gt;
    &lt;Header
        as='h1'
        inverted
        style={{
          backgroundImage: `url(${"images/image_03-1024x320.jpg"})`,
          backgroundSize: 'cover',
          fontSize: mobile ? '2em' : '4em',
          fontWeight: 'normal',
          marginBottom: 0,
          marginTop: mobile ? '1.5em' : '3em',
        }}
        /&gt;
    &lt;/Container&gt;
  )
  </code></pre>
  
  <p>The result is a tiny  sliver of the image in the <code>Header</code>.</p>