How to dynamically update a background image based on routing in a React framework

Question

I am trying to update a background image based on various routing options. However no background is displayed at all.

I've tried inline styling and making sure I'm referring to the right directories.

Originally the css just set the background by changing the html background but I could not make this dynamic.

class App extends Component {
   constructor() {
    super();
    this.state = {
      'route': 'Home'
    }
  }

  onRouteChange = (route) => {
    this.setState({route: route});
  }

  render() {
    if (this.state.route === 'Home') {
      return (
        <div className='App home'>
          <div style={{display: 'flex', justifyContent: 'flex-end', backgroundColor: 'rgb(91,121,97, 0.5)'}}>
            <div style={{marginRight: 'auto'}}><Logo onRouteChange={this.onRouteChange}/></div>
            <Navigation onRouteChange={this.onRouteChange}/>
          </div>
            <SideBar/>
        </div>
      )
    } else {
      return(
        <div className='App theAnimalKingdom'>
         <div style={{display: 'flex', justifyContent: 'flex-end', backgroundColor: 'rgb(91,121,97, 0.5)'}}>
           <div style={{marginRight: 'auto'}}><Logo onRouteChange={this.onRouteChange}/></div>
           <Navigation onRouteChange={this.onRouteChange}/>
         </div>
        </div>
      )
    }
  }
}

export default App;

The app.css is shown below.

div.app {
    height: 100%;
    width: 100%;
}

div.home {  
    background-image: url('./Images/cover.jpg') no-repeat center bottom fixed;
    background-size: 100% 100%;
}

div.theAnimalKingdom {  
    background-image: url('./Images/other.jpg') no-repeat center bottom fixed;
    background-size: 100% 100%;
}

If the this.status should change to theAnimalKingdom then the background should change to other.jpg

so what is the question? any problem beside the different class names - `Home` in JSX vs `.home` in CSS? — Aprillion, Jan 24 '19 at 11:12
well I'm new to react but I try to help as much as I can, I would try to create a prop for the background, do you want to change the background the full view ?or for a specific element ? maybe you could change the prop like you switch the route in the switch https://reacttraining.com/react-router/core/api/Switch — Daniel Vafidis, Jan 24 '19 at 11:12
@Aprillion Thankyou, I did change Home to home and the problem still persists. I simply have no background at all just a white page with the attached elements. — Ivor Denham-Dyson, Jan 24 '19 at 11:26
@DanielVafidis Thank you, looks like a helpful package. I'll give it a go. It does not solve my problem of no background at all though. The routing works just fine. I would like the background to be changed to full view. — Ivor Denham-Dyson, Jan 24 '19 at 11:28

score 0 · Accepted Answer · answered Jan 24 '19 at 11:48

There is no such thing as ./something (relative paths to "current" folder) for CSS <url> values of background-image.

You can use relative URLs, but those are relative to the CSS file (in build folder after the webpack/typescript/... compilation - if using create-react-app, assets from public folder are copied all, but assets from src only when actually imported).

Setting a backgroundImage With React Inline Styles might be easier, but placing the images to public folder is also possible.

How to dynamically update a background image based on routing in a React framework

1 Answers1