How to render background image in header with Semantic-UI-React <Container>

Question

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 <Header> working. I've tried many combinations.

Here's my <Container> and <Header> code in React :

  <Container>
  <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',
      }}
      />
  </Container>
)

The result is a tiny sliver of the image in the Header .

Answer 1

It's hard to say for sure without a working example to inspect but I suspect you need to add a width and height. Also you may need to make the h1 have a display of inline-block . Try this:

<Container>
    <Header
        as='h1'
        inverted
        style={{
            width: 1024,
            height: 320,
            display: 'inline-block',
            opacity: 0.5,
            backgroundImage: `url(${"images/image_03-1024x320.jpg"})`,
            backgroundSize: 'cover',
            fontSize: mobile ? '2em' : '4em',
            fontWeight: 'normal',
            marginBottom: 0,
            marginTop: mobile ? '1.5em' : '3em',
        }}
    >
       Hello World
    </Header>
</Container>