Set background image for one component differently in ReactJS

Issue

I am struggling with a problem, where I want to set the background image for one component differently. This is how it is written in the index.css:

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: "EB Garamond", serif !important;
  background-image: url("views/graphics/CatanBG.png");
  overflow-x: hidden;
}

/* set background image per page */
.game-bg {
  background: url('views/graphics/sea.gif');
  background-size: 30px;
 ;
}

This produces the following picture:

As you can see, the actual background image is still ("views/graphics/CatanBG.png") and when zooming out it looks like this:

I use game-bg in the div for the component where I want to have it as background image like that:

render() {
    console.log("state", this.state);
    return (
      <div className={"game-bg"}>
       more code
      </div>
}

Anyone with an idea on what the problem is?

Thanks in advance!

Solution

so I know you're using CSS instead but if you wanted to consider using styled-components (which is great by the way) then it's super simple. You can use this:

const GlobalStyle = createGlobalStyle`
  html {
    background: ${props => (props.something ? url(imageone) : url(imagetwo))};
  }
`

that way you can pass a prop in and then render something different based off that. I do this to render a different background image for my app

the docs are here: https://styled-components.com/docs/api

let me know if you need any more details

Answered By - Red Baron